Quiz (#247)

* Quiz and Course reporting

* Removed lint errors

* Removed codeql errors

* Added docs for quiz and questions can be deleted

Co-authored-by: Rajat Saxena <hi@rajatsaxena.dev>

apps/docs/src/config.ts

@@ -1,5 +1,5 @@
 export const SITE = {
-    title: "CourseLit Documentation",
+    title: "CourseLit Docs",
     description: "Sell courses, digital downloads on your own website",
     defaultLanguage: "en_US",
 };
@@ -50,6 +50,6 @@ export const SIDEBAR: Sidebar = {
             { text: "Self hosting", link: "en/self-hosting" },
             // { text: 'Page 3', link: 'en/page-3' },
         ],
-        // 'Another Section': [{ text: 'Page 4', link: 'en/page-4' }],
+        Courses: [{ text: "Add quiz", link: "en/lessons/add-quiz" }],
     },
 };

apps/docs/src/pages/en/introduction.md

@@ -4,11 +4,11 @@ description: Docs intro
 layout: ../../layouts/MainLayout.astro
 ---
 
-### What is CourseLit?
+## What is CourseLit?
 
 CourseLit is a **learning management system** (aka LMS) for everyone who wants to build and sell courses (or digital downloads) on her own branded website.
 
-### Key Features
+## Key Features
 
 -   **Course Authoring**: Use text, images, videos, downloadable files to create full featured courses.
 -   **Student Management**: Track your students' progress, restrict access to the platform and more.
@@ -19,21 +19,21 @@ CourseLit is a **learning management system** (aka LMS) for everyone who wants t
 -   **Self-hosted**: Host CourseLit on your own server to claim total data ownership.
 -   **Open Source**: Read and modify the source code to build your own variations.
 
-### Try CourseLit
+## Try CourseLit
 
 Visit <a href="https://courselit.app" target="_blank">courselit.app</a> to use the cloud hosted version. Sign up for a free account to get a **14 days trial period** to experience the platform without any restrictions. **No credit card required**.
 
-### Self Hosting
+## Self Hosting
 
 CourseLit is an open-source LMS and can be hosted on a server where you control everything. If data ownership is at center of your business, self-hosting CourseLit is a way to go.
 
 Follow [our guide](/en/self-hosting) for full, step by step instructions for hosting CourseLit on your server.
 
-### Join Our Community
+## Join Our Community
 
 Join our [Discord](https://discord.com/invite/GR4bQsN) channel to get help, to request for features or to just hang out with an awesome community of creators.
 
-### Learn More
+## Learn More
 
 <a href="https://honey-oviraptor-4b7.notion.site/4a82d434ff2e485c8eb4b22f13252fef?v=9873e6e4812c420ab6a5cd81eca11356" target="_blank">CourseLit Roadmap</a>
 

apps/docs/src/pages/en/lessons/add-quiz.md

@@ -0,0 +1,83 @@
+---
+title: Add a quiz to a course
+description: Add a quiz to a course
+layout: ../../../layouts/MainLayout.astro
+---
+
+You can easily add quizzes to your online courses in CourseLit. This article will show you how.
+
+## Set up a non-graded quiz
+
+> A non-graded quiz can be marked completed without passing it (or even attempting it).
+
+1. Go to the `Products` page and click on the course you want to add a quiz to. This will open up a course details screen as shown below. Click on the `Content` tab.
+
+![lesson-quiz](/assets/lessons/content.png)
+
+2. Click on the `New lesson` button.
+
+![new-lesson](/assets/lessons/new-lesson.png)
+
+3. On the new screen, click on the dropdown called `Type` and select `Quiz`.
+
+![lesson-type-quiz](/assets/lessons/quiz/drop-down.png)
+
+4. A new area will show up on the same page. Here you can add/remove/edit questions of your quiz. One question is added for you by default.
+
+![quiz-initial-screen](/assets/lessons/quiz/initial-screen.png)
+
+5. To add a new option to a question, click on the `Add option` button.
+
+![add-option](/assets/lessons/quiz/add-option.png)
+
+6. To set a correct answer to a question, click on the checkbox to the left of the option. Make sure it is checked.
+
+![set-correct-answer](/assets/lessons/quiz/correct-answer.png)
+
+7. To delete an option, click the delete icon located at the far right of the option.
+
+![delete-option](/assets/lessons/quiz/delete-option.png)
+
+8. To add more questions to the quiz, click on the `Add question` button.
+
+![add-question](/assets/lessons/quiz/add-question.png)
+
+9. To delete a question, click the delete icon located at the top right of the question.
+
+![delete-question](/assets/lessons/quiz/delete-question.png)
+
+The first question cannot be deleted.
+
+10. That's it! Click the save button to save changes to your lesson.
+
+## Set up a graded quiz
+
+> A graded quiz cannot be marked completed without passing it.
+
+1. Follow the steps detailed under [Set up a non graded quiz](#set-up-a-non-graded-quiz) section to first set up a quiz but don't click on `Save` yet!
+
+2. Click on the checkbox against `This quiz requires a passing grade` as shown below.
+
+![graded](/assets/lessons/quiz/graded.png)
+
+2. By default, a student is required to score at-least `70%` in order to pass the quiz. You can change this value as shown below.
+
+![passing-score](/assets/lessons/quiz/passing-score.png)
+
+3. That's it! Click on the save button now to save changes to your lesson.
+
+## Student's View
+
+Following is how your quiz will appear to your students.
+
+![student-view](/assets/lessons/quiz/student-view.png)
+
+Student can click on the `Check score` button to get evaluated. The result of the evaluation will be visible at bottom left of the screen as shown below.
+
+![evaluation](/assets/lessons/quiz/evaluation.png)
+
+It is this easy to add quizzes to your courses!
+
+## Stuck somewhere?
+
+We are always there for you. Come chat with us in our <a href="https://discord.com/invite/GR4bQsN" target="_blank">Discord</a> channel or send a tweet at <a href="https://twitter.com/courselit" target="_blank">@CourseLit</a>.

apps/web/components/admin/products/editor/content/quiz-builder/index.tsx

@@ -86,6 +86,11 @@ export function QuizBuilder({ content, onChange }: QuizBuilderProps) {
         setQuestions([...questions]);
     };
 
+    const deleteQuestion = (questionIndex: number) => {
+        questions.splice(questionIndex, 1);
+        setQuestions([...questions]);
+    };
+
     const addNewQuestion = () =>
         setQuestions([
             ...questions,
@@ -116,6 +121,7 @@ export function QuizBuilder({ content, onChange }: QuizBuilderProps) {
                             setOptionText={setOptionText(index)}
                             setCorrectOption={setCorrectAnswer(index)}
                             addNewOption={() => addNewOption(index)}
+                            deleteQuestion={deleteQuestion}
                         />
                     </Section>
                 </Grid>

apps/web/components/admin/products/editor/content/quiz-builder/question-builder.tsx

@@ -17,6 +17,7 @@ import {
     LESSON_QUIZ_OPTIONS_HEADER,
     QUESTION_BUILDER_COLLAPSE_TOOLTIP,
     QUESTION_BUILDER_CORRECT_ANS_TOOLTIP,
+    QUESTION_BUILDER_DELETE_TOOLTIP,
     QUESTION_BUILDER_EXPAND_TOOLTIP,
 } from "../../../../../../ui-config/strings";
 
@@ -28,6 +29,7 @@ interface QuestionProps {
     setOptionText: (index: number, text: string) => void;
     setCorrectOption: (index: number, checked: boolean) => void;
     addNewOption: () => void;
+    deleteQuestion: (index: number) => void;
 }
 
 export function QuestionBuilder({
@@ -38,6 +40,7 @@ export function QuestionBuilder({
     removeOption,
     addNewOption,
     setCorrectOption,
+    deleteQuestion,
 }: QuestionProps) {
     const [collapsed, setCollapsed] = useState(false);
 
@@ -64,6 +67,13 @@ export function QuestionBuilder({
                     </Typography>
                 </Grid>
                 <Grid item>
+                    {index > 0 && (
+                        <Tooltip title={QUESTION_BUILDER_DELETE_TOOLTIP}>
+                            <IconButton onClick={() => deleteQuestion(index)}>
+                                <Delete />
+                            </IconButton>
+                        </Tooltip>
+                    )}
                     <Tooltip title={QUESTION_BUILDER_EXPAND_TOOLTIP}>
                         <IconButton onClick={() => setCollapsed(false)}>
                             <ExpandMore />
@@ -105,6 +115,15 @@ export function QuestionBuilder({
                         </Typography>
                     </Grid>
                     <Grid item>
+                        {index > 0 && (
+                            <Tooltip title={QUESTION_BUILDER_DELETE_TOOLTIP}>
+                                <IconButton
+                                    onClick={() => deleteQuestion(index)}
+                                >
+                                    <Delete />
+                                </IconButton>
+                            </Tooltip>
+                        )}
                         <Tooltip title={QUESTION_BUILDER_COLLAPSE_TOOLTIP}>
                             <IconButton onClick={() => setCollapsed(true)}>
                                 <ExpandLess />

apps/web/ui-config/strings.ts

@@ -374,3 +374,4 @@ export const COURSE_STUDENT_TABLE_HEADER_SIGNED_UP_ON = "Enrolled on";
 export const COURSE_STUDENT_TABLE_HEADER_LAST_ACCESSED_ON = "Last accessed";
 export const COURSE_STUDENT_SEARCH_BY_TEXT = "Search student";
 export const COURSE_STUDENT_NO_RECORDS = "No student found";
+export const QUESTION_BUILDER_DELETE_TOOLTIP = "Delete question";