Manage Quizzes

The Quiz Management section allows administrators to view, filter, and manage quizzes efficiently. Each quiz includes details such as title, category, level presence, and status. Admins can also add new quizzes or update existing ones via action menus.

Add New Quiz

The Add New Quiz page provides administrators with a form to create and publish new quizzes. This form ensures each quiz includes the necessary details for categorization, visibility, and content.

Accessing the Form

Click the "Add New Quiz" button located at the top-right. This opens a dedicated form where you can input all quiz details.

Add New Quiz

Layout Overview

The form is organized into two primary sections:

Left Column (Main Content): Language-specific content and image uploads
Right Column (Settings): Quiz metadata such as category, level, status, etc.

🖼 Image Uploads

Field	Description
Image	Upload the thumbnail or icon representing the quiz
Banner Image	Upload a banner for quiz header or listing display

Upload Image

🌐 Multi-language Content

Admins can manage quiz titles, tags, and descriptions for multiple languages using this section.

Language Block Fields:

Title – Enter the localized quiz title.
Tags – Add related tags (multi-select dropdown with creation support).
Description – Provide a localized description of the quiz.

You can add new languages via the “Add Language” button and remove existing ones using the trash icon in each block.

Add Language

⚙️ Quiz Settings (Right Column)

📚 Select a Category

Choose a category that the quiz belongs to (e.g., General Knowledge, Literature).

🏷 Quiz Level

Select a level for the quiz:

Beginner
Intermediate
Advanced

Displayed as a dropdown.

💸 Is Free?

Toggle to set whether the quiz is free or requires points.

🎯 Enrollment Point

Set the number of points required to enroll in the quiz (if not free).

🏷 Add Level?

Toggle this switch to indicate whether the quiz should display a special level (like “Featured”).

✅ Status

Toggle between:

Active: Quiz will be visible and usable by users.
Inactive: Quiz remains hidden.

💾 Save Quiz

Click the "Save" button at the bottom-right to submit the form. The quiz will be created with all specified configurations and content.

Save Quiz

Quiz Management Table

The Quiz Management Table provides an organized, responsive view of all existing quizzes. This interface helps administrators quickly scan, review, and interact with quizzes in the system.

📋 Table Structure

The table is horizontally scrollable (overflow-x-auto) to accommodate responsive layouts on smaller screens.

Table Columns:

Column	Description
Title	Displays the quiz's name or headline.
Category	Shows the category the quiz belongs to (e.g., Hardware, Programming).
Has Label	Indicates whether a label (e.g., Featured, New) is associated.
Status	Displays the quiz's current status: `Active` or `Inactive`.
Action	Contains a 3-dot action menu for editing or managing the quiz.

Quiz Table

In the Action column, each quiz has a:

3-dot icon
Clicking this opens a (contextual menu) with additional options such as:
- Questions (Add questions using AI assistance or manual input)
- Edit (Update or revise existing content)
- Delete (Delete the item (confirmation required))
- Change Status (Toggle between Active and Inactive states)

Table Action

🧠 Questions Management

The Questions Management interface allows admins to view, add, or translate questions for a selected quiz.

Available Actions

➕ Add New Question With AI Generate quiz questions automatically using AI assistance.

Add New Question With AI Form

When you click on "Add New Question With AI," you will be directed to a form where you can specify the details for generating new questions using AI. Below are the fields you need to fill out:
- Question Type: Select the type of question you want to generate. Options include:
  - Multiple Choice
  - Single Choice
  - True/False
  - Fill in the Blank
- Question Count: Enter the number of questions you want to generate.
- Time Limit (in minutes): Specify the time limit for each question in minutes.
- Score: Enter the score for each question.
- Topic Details: Provide subtopic details related to the main topic for which you want to generate questions.
Once you have filled out the form, click the Save button to generate and save the questions.
- ✍️ Add New Question Manually Input questions manually with full control over content and structure.
  
  Add New Question Manually Form
  
  When you click on "Add New Question Manually," you will be directed to a form where you can input the details for a new question. Below are the fields you need to fill out:
  - Question Type: Select the type of question you want to add. Options include:
    - Multiple Choice
    - Single Choice
    - True/False
    - Fill in the Blank
  - Time Limit (in minutes): Specify the time limit for the question in minutes.
  - Score: Enter the score for the question.
  - Question: Enter the text of the question.
  - Question Options: Add options for the question. You can add multiple options as needed.
  - Correct Answers: Specify the correct answers for the question.
  - Answer Explanation: Provide an explanation for the answer if necessary.
  - Explanation Type (Optional): Select an explanation type if you want to add additional context or media to explain the answer. Options include:
    - Text
    - Video
    - Image
    - Audio
    - None
  Once you have filled out the form, click the Save button to add the question to the quiz.
🌐 Add Translation With AI Translate existing questions into different languages using AI.

This system streamlines quiz creation and management, with AI tools available for rapid content generation.

Quiz Questions Management

The Quiz Questions Management interface provides an organized view of all questions within a quiz. This interface helps administrators quickly scan, review, and interact with questions in the system.

Drag-and-Drop Functionality

Each list item is draggable, allowing administrators to reorder questions easily. The drag-and-drop functionality includes:

Drag Handle: A button with dots that can be dragged to reorder the question.
Drag Events: Includes dragstart, dragend, dragover, and drop events to handle the reordering smoothly.

List Structure

The list is designed to be interactive and responsive, allowing for drag-and-drop reordering of questions.

Drag-and-Drop Example

Actions:

Edit: Allows the administrator to edit the question.

Question List Interaction

Delete: Allows the administrator to delete the question.

Question List Interaction