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.
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
}
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);
};
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);
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.