export default function ConfirmEndTutorialDialog({isOpen, handleRequestClose}) {
return (
<Modal
open={isOpen}
size="small"
onDismiss={handleRequestClose}
label={I18n.t('End Course Set-up Tutorial')}
>
<ModalBody>
{I18n.t(
'Turning off this tutorial will remove the tutorial tray from your view for all of your courses. It can be turned back on under Feature Options in your User Settings.'
)}
</ModalBody>
<ModalFooter>
<Button onClick={handleRequestClose}>{I18n.t('Cancel')}</Button>
<Button
onClick={() =>
axios.put(API_URL, {state: 'off'}).then(() => ConfirmEndTutorialDialog.onSuccess())
}
variant="primary"
>
{I18n.t('Okay')}
</Button>
</ModalFooter>
</Modal>
)
}
const PeopleTray = () => (
<TutorialTrayContent
heading={I18n.t('People')}
subheading={I18n.t('Add Students, TAs, and Observers to your course')}
image="/images/tutorial-tray-images/people.svg"
>
<Text as="p">
{
I18n.t('Manage enrollment status, create groups, and add users from this page.')
}
</Text>
</TutorialTrayContent>
);
const QuizzesTray = () => (
<TutorialTrayContent
heading={I18n.t('Quizzes')}
subheading={I18n.t('Assess and survey your students')}
image="/images/tutorial-tray-images/quiz.svg"
>
<Text as="p">
{
I18n.t('Create and administer online quizzes and surveys, both graded and ungraded.')
}
</Text>
</TutorialTrayContent>
);
const CollaborationsTray = () => (
<TutorialTrayContent
heading={I18n.t('Collaborations')}
subheading={I18n.t('Work and create together')}
image="/images/tutorial-tray-images/collaborations.svg"
>
<Text as="p">
{
I18n.t(`Provide a space for users to work on a single Google Doc
simultaneously, from within your Canvas course.`)
}
</Text>
</TutorialTrayContent>
);
const HomeTray = () => (
<div>
<Heading as="h2" level="h1" >{I18n.t('Home')}</Heading>
<Typography size="large" as="p">
{I18n.t('This is your course landing page!')}
</Typography>
<Typography as="p">
{
I18n.t("When people visit your course, this is the first page they'll see. " +
"We've set your home page to Modules, but you have the option to change it.")
}
</Typography>
</div>
);
const GradesTray = () => (
<div>
<Heading as="h2" level="h1" >{I18n.t('Grades')}</Heading>
<Typography size="large" as="p">
{I18n.t('Track individual student and class progress')}
</Typography>
<Typography as="p">
{
I18n.t(`Input and distribute grades for students. Display grades as
points, percentages, complete or incomplete, pass or fail, GPA scale,
and letter grades. Group assignments for grade weighting.`)
}
</Typography>
</div>
);
const PagesTray = () => (
<TutorialTrayContent
heading={I18n.t('Pages')}
subheading={I18n.t('Create educational resources')}
image="/images/tutorial-tray-images/page.svg"
>
<Text as="p">
{
I18n.t(`Build Pages containing content and educational resources that
help students learn but aren't assignments. Include text,
multimedia, and links to files and external resources.`)
}
</Text>
</TutorialTrayContent>
);
const FilesTray = () => (
<div>
<Heading as="h2" level="h1" >{I18n.t('Files')}</Heading>
<Typography size="large" as="p">
{I18n.t('Images, Documents, and more')}
</Typography>
<Typography as="p">
{
I18n.t(`Upload course files, syllabi, readings, or other documents.
Lock folders to keep them hidden from students. Add files to Modules,
Assignments, Discussions, or Pages.`)
}
</Typography>
</div>
);
const SyllabusTray = () => (
<TutorialTrayContent
heading={I18n.t('Syllabus')}
subheading={I18n.t('An auto-generated chronological summary of your course')}
image="/images/tutorial-tray-images/syllabus.svg"
>
<Typography as="p">
{
I18n.t(`Communicate to your students exactly what will be required
of them throughout the course in chronological order. Generate a
built-in Syllabus based on Assignments and Events that you've created.`)
}
</Typography>
</TutorialTrayContent>
);
const FilesTray = () => (
<TutorialTrayContent
heading={I18n.t('Files')}
subheading={I18n.t('Images, Documents, and more')}
image="/images/tutorial-tray-images/files.svg"
>
<Text as="p">
{
I18n.t(`Upload course files, syllabi, readings, or other documents.
Lock folders to keep them hidden from students. Add files to Modules,
Assignments, Discussions, or Pages.`)
}
</Text>
</TutorialTrayContent>
);
const ConferencesTray = () => (
<TutorialTrayContent
heading={I18n.t('Conferences')}
subheading={I18n.t('Virtual lectures in real-time')}
image="/images/tutorial-tray-images/conferences.svg"
>
<Text as="p">
{
I18n.t(`Conduct virtual lectures, virtual office hours, and student
groups. Broadcast real-time audio and video, share presentation
slides, give demonstrations of applications and online resources,
and more.`)
}
</Text>
</TutorialTrayContent>
);
const HomeTray = () => (
<TutorialTrayContent
name="Home"
heading={I18n.t('Home')}
subheading={I18n.t('This is your course landing page')}
image="/images/tutorial-tray-images/publish.png"
>
<Text as="p">
{
I18n.t(`When people visit your course, this is the first page they'll see.
We've set your homepage to Modules, but you have the option to change it.`)
}
</Text>
<Text as="p">
{
I18n.t(`You can publish your course from the home page whenever you’re ready
to share it with students. Until your course is published, only instructors will be able to access it.`)
}
</Text>
</TutorialTrayContent>
);
render () {
return (
<Modal
isOpen={this.props.isOpen}
size="small"
onReady={this.handleModalReady}
onClose={this.handleModalClose}
onRequestClose={this.props.handleRequestClose}
label={I18n.t('End Course Set-up Tutorial Dialog')}
closeButtonLabel={I18n.t('Close')}
>
<ModalHeader>
<Heading>{I18n.t('End Course Set-up Tutorial')}</Heading>
</ModalHeader>
<ModalBody>
{
I18n.t('Turning off this tutorial will remove the tutorial tray from your view ' +
'for all of your courses. It can be turned back on under Feature Options in your User Settings.')
}
</ModalBody>
<ModalFooter>
<Button
onClick={this.props.handleRequestClose}
>
{I18n.t('Cancel')}
</Button>
<Button
onClick={this.handleOkayButtonClick}
variant="primary"
>
{I18n.t('Okay')}
</Button>
</ModalFooter>
</Modal>
);
}
