Current Location: Home> Latest Articles> How to Add Sub-questions and Supplementary Questions in Online Quiz Systems

How to Add Sub-questions and Supplementary Questions in Online Quiz Systems

M66 2025-07-29

How to Add Sub-questions and Supplementary Questions in Online Quiz Systems

In online quiz systems, questions often have complex structures, with the main question possibly including sub-questions and supplementary questions. To meet these needs, this article will explain how to implement this functionality using JavaScript code.

Defining the Question Object

First, we need to define a question object to represent each question's content, options, answers, as well as any sub-questions and supplementary questions. This can be done by creating a constructor function for the question object and defining its properties.

function Question(content, options, answer) {
  this.content = content;
  this.options = options;
  this.answer = answer;
  this.subQuestions = []; // Array for sub-questions
  this.supplementQuestions = []; // Array for supplementary questions
}

Methods to Add Sub-questions and Supplementary Questions

Next, we add two methods to the question object: one for adding sub-questions and another for adding supplementary questions. This allows us to easily associate sub-questions and supplementary questions with the main question.

Question.prototype.addSubQuestion = function(subQuestion) {
  this.subQuestions.push(subQuestion);
};
Question.prototype.addSupplementQuestion = function(supplementQuestion) {
  this.supplementQuestions.push(supplementQuestion);
};

Creating and Adding Sub-questions and Supplementary Questions

We can create question objects using the defined constructor and then add sub-questions and supplementary questions using the corresponding methods. Below is an example code:

var mainQuestion = new Question("Main question content", ["Option A", "Option B", "Option C"], "Answer A");
var subQuestion1 = new Question("Sub-question 1 content", ["Option A", "Option B"], "Answer B");
var subQuestion2 = new Question("Sub-question 2 content", ["Option C"], "Answer C");
mainQuestion.addSubQuestion(subQuestion1);
mainQuestion.addSubQuestion(subQuestion2);
var supplementQuestion1 = new Question("Supplementary question 1 content", ["Option A", "Option B", "Option C"], "Answer B");
var supplementQuestion2 = new Question("Supplementary question 2 content", ["Option C"], "Answer C");
mainQuestion.addSupplementQuestion(supplementQuestion1);
mainQuestion.addSupplementQuestion(supplementQuestion2);

Summary

Through the above code example, we have successfully implemented the functionality of adding sub-questions and supplementary questions in an online quiz system. This approach not only clarifies the structure of the questions but also makes it easy to extend and maintain. Additionally, the question objects can interact with the backend database to store and retrieve data. We can also render the page dynamically based on the properties of the question objects to display complex question formats.

With this method, our online quiz system can support more complex question structures, improving the user experience.