diff --git a/apps/docs/pages/howtoguides/create-exercise.mdx b/apps/docs/pages/howtoguides/create-exercise.mdx index 828c9192..14152ec7 100644 --- a/apps/docs/pages/howtoguides/create-exercise.mdx +++ b/apps/docs/pages/howtoguides/create-exercise.mdx @@ -1,7 +1,93 @@ -import { Callout } from "nextra/components"; +import Image from 'next/image'; +import { Steps } from "nextra/components"; +import OrganizationDashboard from './images/organization-dashboard.webp'; +import CoursesPage from './images/courses-page.webp'; +import CoursePage from './images/course-page.webp'; +import Exercise from './images/exercise.webp'; +import FromScratch from './images/from-scratch.webp'; +import UsingATemplate from './images/using-a-template.webp'; +import UsingAI from './images/using-AI.webp'; +import Preview from './images/preview.webp'; +import AddQuestion from './images/add-question.webp'; +import ReorderQuestions from './images/reorder-questions.webp'; +import NewExercise from './images/new-exercise.webp'; + # How to Create an Exercise - - This page is a work in progress. Help us expand it by contributing! - +In ClassroomIO, exercises are a great way to assess students' understanding through practice activities. Once you’ve [set up your organization](https://www.classroomio.com/docs/howtoguides/customize-organization), [created a course](https://www.classroomio.com/docs/howtoguides/create-first-course), and [added a lesson](https://www.classroomio.com/docs/howtoguides/create-first-course#adding-lessons), you can start creating exercises. Follow the process below to create your first exercise. + + + + ### Go to the Courses Page + + +Access the courses page from the dashboard by clicking on **Courses** via the sidebar menu. + +Organization dashboard displaying a sidebar menu + + ### Select a Course + +On the courses page, click on a course to go to the course page. + +Courses page for organization displaying a sidebar menu and a course card component + + ### Select a Lesson + +On the course page, click on **Lessons** via the left sidebar menu and select the lesson you want to create an exercise for. + +> Alternatively, you can click on the **⌄** icon next to the **Lessons** option to select a lesson. + +Course page displaying sidebar menu with the lesson page open + + ### Add an Exercise + +Locate the tabs at the top of the page and select the **Exercises** tab. Then click on the **Add** button. On the modal, select a method to create an exercise. You can create an exercise: + +Course page displaying sidebar menu with the exercise tab open + +1. **From scratch**: Create an exercise by adding the questions yourself. This is handy if you’ve prepared your questions. + - Enter the exercise name and click on the **Finish** button. + - Click on the newly created exercise and provide the exercise description, due date, and question details. + +A pop-up displaying new exercise with an empty field + +2. **Using a template**: You can select from an array of templates with predefined exercises complete with questions and options. + - Select a template and click on the **Finish** button. + +A pop-up displaying new exercise with an array of exercise templates + +3. **Using AI**: AI helps you generate exercises directly from lesson notes. + - Enter the number of questions and options. Next, click on the **Generate** button. + +A pop-up displaying new exercise with two questions about the exercise content + +#### Preview Exercise + +To preview the exercise, click on the **preview icon**. This is to ensure the exercise looks and functions as expected. + +Exercise content edit page + +#### Add Questions + +To add a question, click on the **add icon**. + +Exercise content edit page with a red box highlight on the add icon + +#### Reorder Questions + +To reorder questions, click on the **three dots** > **Reorder Questions**, then drag and drop the questions. + +A pop-up showing the question order for exercise + +#### Save Changes + +After previewing, adding, and rearranging questions, ensure to save your changes by clicking on the **Save** button. This will apply your modifications to the exercise. + +### Your Exercise Is Ready + +You’ve successfully created your first exercise and It is now accessible to students enrolled in the course. Move on to the next section to start grading your exercise. + +Course page displaying sidebar menu with the exercise tab open showing the newly created exercise + + diff --git a/apps/docs/pages/howtoguides/images/add-question.webp b/apps/docs/pages/howtoguides/images/add-question.webp new file mode 100644 index 00000000..f0192254 Binary files /dev/null and b/apps/docs/pages/howtoguides/images/add-question.webp differ diff --git a/apps/docs/pages/howtoguides/images/course-page.webp b/apps/docs/pages/howtoguides/images/course-page.webp new file mode 100644 index 00000000..41535a8a Binary files /dev/null and b/apps/docs/pages/howtoguides/images/course-page.webp differ diff --git a/apps/docs/pages/howtoguides/images/courses-page.webp b/apps/docs/pages/howtoguides/images/courses-page.webp new file mode 100644 index 00000000..c9acb9b0 Binary files /dev/null and b/apps/docs/pages/howtoguides/images/courses-page.webp differ diff --git a/apps/docs/pages/howtoguides/images/exercise.webp b/apps/docs/pages/howtoguides/images/exercise.webp new file mode 100644 index 00000000..42fa02c3 Binary files /dev/null and b/apps/docs/pages/howtoguides/images/exercise.webp differ diff --git a/apps/docs/pages/howtoguides/images/from-scratch.webp b/apps/docs/pages/howtoguides/images/from-scratch.webp new file mode 100644 index 00000000..0cbe7377 Binary files /dev/null and b/apps/docs/pages/howtoguides/images/from-scratch.webp differ diff --git a/apps/docs/pages/howtoguides/images/new-exercise.webp b/apps/docs/pages/howtoguides/images/new-exercise.webp new file mode 100644 index 00000000..69aff3fd Binary files /dev/null and b/apps/docs/pages/howtoguides/images/new-exercise.webp differ diff --git a/apps/docs/pages/howtoguides/images/organization-dashboard.webp b/apps/docs/pages/howtoguides/images/organization-dashboard.webp new file mode 100644 index 00000000..d05aef89 Binary files /dev/null and b/apps/docs/pages/howtoguides/images/organization-dashboard.webp differ diff --git a/apps/docs/pages/howtoguides/images/preview.webp b/apps/docs/pages/howtoguides/images/preview.webp new file mode 100644 index 00000000..47cabcab Binary files /dev/null and b/apps/docs/pages/howtoguides/images/preview.webp differ diff --git a/apps/docs/pages/howtoguides/images/reorder-questions.webp b/apps/docs/pages/howtoguides/images/reorder-questions.webp new file mode 100644 index 00000000..89a08c22 Binary files /dev/null and b/apps/docs/pages/howtoguides/images/reorder-questions.webp differ diff --git a/apps/docs/pages/howtoguides/images/using-AI.webp b/apps/docs/pages/howtoguides/images/using-AI.webp new file mode 100644 index 00000000..53560314 Binary files /dev/null and b/apps/docs/pages/howtoguides/images/using-AI.webp differ diff --git a/apps/docs/pages/howtoguides/images/using-a-template.webp b/apps/docs/pages/howtoguides/images/using-a-template.webp new file mode 100644 index 00000000..6ff8a9ab Binary files /dev/null and b/apps/docs/pages/howtoguides/images/using-a-template.webp differ