Create a Quiz

This tutorial shows you how to create the following quiz—a multi-page survey that limits response time and tracks correct/incorrect answers.

Follow the steps below:

• Configure Questions
• Specify Time Limits
• Set Up a Start Page
• Display Quiz Results
• Render the Quiz

View Full Code on GitHub

Quizzes can include any question type supported by the SurveyJS Form Library. The following code sets up three Radiogroup questions. Note that for each question, the correctAnswer property is specified.

const surveyJson = {
  title: "American History",
  pages: [{
    elements: [{
      type: "radiogroup",
      name: "civilwar",
      title: "When was the American Civil War?",
      choices: [
        "1796-1803", "1810-1814", "1861-1865", "1939-1945"
      ],
      correctAnswer: "1861-1865"
    }]
  }, {
    elements: [{
      type: "radiogroup",
      name: "libertyordeath",
      title: "Whose quote is this: \"Give me liberty, or give me death\"?",
      choicesOrder: "random",
      choices: [
        "John Hancock", "James Madison", "Patrick Henry", "Samuel Adams"
      ],
      correctAnswer: "Patrick Henry"
    }]
  }, {
    elements: [{
      type: "radiogroup",
      name: "magnacarta",
      title: "What is Magna Carta?",
      choicesOrder: "random",
      choices: [
        "The foundation of the British parliamentary system",
        "The Great Seal of the monarchs of England",
        "The French Declaration of the Rights of Man",
        "The charter signed by the Pilgrims on the Mayflower"
      ],
      correctAnswer: "The foundation of the British parliamentary system"
    }]
  }]
};

You can set time limits for a page and for the entire quiz using the following properties:

• SurveyModel.timeLimit
  A time limit to finish the entire survey.

• SurveyModel.timeLimitPerPage
  A time limit to finish one page.

• PageModel.timeLimit
  A time limit to finish a specific page. Overrides the survey's timeLimitPerPage property.

These properties specify time limits in seconds. If a time limit is negative or 0, it does not apply. A survey with a page time limit doesn't display the Previous Page button, disallowing users to return to previous pages.

The timer starts when a user begins the quiz. You can call the stopTimer() and startTimer() methods to suspend and resume the timer programmatically:

const surveyJson = { ... };
const survey = new Survey.Model(surveyJson);

survey.startTimer();
survey.stopTimer();

To display elapsed and remaining time, set the showTimer property to true:

const surveyJson = {
  showTimer: true
};

The timer panel can include information about time spent on the current page, on the entire quiz, or both. Use the timerInfoMode property to specify the desired mode:

const surveyJson = {
  timerInfoMode: "combined" // or "page" | "survey"
};

const surveyJson = {
  title: "American History",
  showProgressBar: "bottom",
  showTimer: true,
  timeLimitPerPage: 10,
  timeLimit: 25,
  pages: [{
    elements: [{
      type: "radiogroup",
      name: "civilwar",
      title: "When was the American Civil War?",
      choices: [
        "1796-1803", "1810-1814", "1861-1865", "1939-1945"
      ],
      correctAnswer: "1861-1865"
    }]
  }, {
    elements: [{
      type: "radiogroup",
      name: "libertyordeath",
      title: "Whose quote is this: \"Give me liberty, or give me death\"?",
      choicesOrder: "random",
      choices: [
        "John Hancock", "James Madison", "Patrick Henry", "Samuel Adams"
      ],
      correctAnswer: "Patrick Henry"
    }]
  }, {
    elements: [{
      type: "radiogroup",
      name: "magnacarta",
      title: "What is Magna Carta?",
      choicesOrder: "random",
      choices: [
        "The foundation of the British parliamentary system",
        "The Great Seal of the monarchs of England",
        "The French Declaration of the Rights of Man",
        "The charter signed by the Pilgrims on the Mayflower"
      ],
      correctAnswer: "The foundation of the British parliamentary system"
    }]
  }]
};

A start page is used to show an introduction to your quiz. Configure the start page in the first object of the pages array. In the code below, the start page contains an introductory message and an input field for the user to enter their name:

const surveyJson = {
  pages: [{
    elements: [{
      type: "html",
      html: "You are about to start a quiz on American history. <br>You will have 10 seconds for every question and 25 seconds to end the quiz.<br>Enter your name below and click <b>Start Quiz</b> to begin."
    }, {
      type: "text",
      name: "username",
      titleLocation: "hidden",
      isRequired: true
    }]
  },
  // ...
  // Other quiz pages are configured here
  // ...
  ]
};

Enable the firstPageIsStarted property to add a Start button to the start page markup. You can use the startSurveyText property to change the button caption:

const surveyJson = {
  firstPageIsStarted: true,
  startSurveyText: "Start Quiz",
};

const surveyJson = {
  title: "American History",
  showProgressBar: "bottom",
  showTimer: true,
  timeLimitPerPage: 10,
  timeLimit: 25,
  firstPageIsStarted: true,
  startSurveyText: "Start Quiz",
  pages: [{
    elements: [{
      type: "html",
      html: "You are about to start a quiz on American history. <br>You will have 10 seconds for every question and 25 seconds to end the quiz.<br>Enter your name below and click <b>Start Quiz</b> to begin."
    }, {
      type: "text",
      name: "username",
      titleLocation: "hidden",
      isRequired: true
    }]
  }, {
    elements: [{
      type: "radiogroup",
      name: "civilwar",
      title: "When was the American Civil War?",
      choices: [
        "1796-1803", "1810-1814", "1861-1865", "1939-1945"
      ],
      correctAnswer: "1861-1865"
    }]
  }, {
    elements: [{
      type: "radiogroup",
      name: "libertyordeath",
      title: "Whose quote is this: \"Give me liberty, or give me death\"?",
      choicesOrder: "random",
      choices: [
        "John Hancock", "James Madison", "Patrick Henry", "Samuel Adams"
      ],
      correctAnswer: "Patrick Henry"
    }]
  }, {
    elements: [{
      type: "radiogroup",
      name: "magnacarta",
      title: "What is Magna Carta?",
      choicesOrder: "random",
      choices: [
        "The foundation of the British parliamentary system",
        "The Great Seal of the monarchs of England",
        "The French Declaration of the Rights of Man",
        "The charter signed by the Pilgrims on the Mayflower"
      ],
      correctAnswer: "The foundation of the British parliamentary system"
    }]
  }]
};

Quiz results are displayed on the complete page. To configure its content, assign HTML markup to the completedHtml property. The markup can include the following placeholders:

• {correctAnswers} - The number of correct answers.
• {incorrectAnswers} - The number of incorrect answers.
• {questionCount} - The number of questions.

const surveyJson = {
  completedHtml: "<h4>You got <b>{correctAnswers}</b> out of <b>{questionCount}</b> correct answers.</h4>",
};

Your application may require multiple versions of the complete page. For example, you can change element styles to highlight poor or excellent results. To specify page variants, populate the completedHtmlOnCondition array. Each object in this array should contain a Boolean expression and HTML markup that applies when this expression evaluates to true. The expressions and the markup can use the same data placeholders:

const surveyJson = {
  completedHtmlOnCondition: [{
    expression: "{correctAnswers} == 0",
    html: "<h4>Unfortunately, none of your answers are correct. Please try again.</h4>"
  }, {
    expression: "{correctAnswers} == {questionCount}",
    html: "<h4>Congratulations! You answered all the questions correctly!</h4>"
  }]
};

The completedHtml and completedHtmlOnCondition properties can be used together. In this case, if none of the completedHtmlOnCondition expressions evaluate to true, the complete page displays the HTML markup from the completedHtml property.

const surveyJson = {
  title: "American History",
  showProgressBar: "bottom",
  showTimer: true,
  timeLimitPerPage: 10,
  timeLimit: 25,
  firstPageIsStarted: true,
  startSurveyText: "Start Quiz",
  pages: [{
    elements: [{
      type: "html",
      html: "You are about to start a quiz on American history. <br>You will have 10 seconds for every question and 25 seconds to end the quiz.<br>Enter your name below and click <b>Start Quiz</b> to begin."
    }, {
      type: "text",
      name: "username",
      titleLocation: "hidden",
      isRequired: true
    }]
  }, {
    elements: [{
      type: "radiogroup",
      name: "civilwar",
      title: "When was the American Civil War?",
      choices: [
        "1796-1803", "1810-1814", "1861-1865", "1939-1945"
      ],
      correctAnswer: "1861-1865"
    }]
  }, {
    elements: [{
      type: "radiogroup",
      name: "libertyordeath",
      title: "Whose quote is this: \"Give me liberty, or give me death\"?",
      choicesOrder: "random",
      choices: [
        "John Hancock", "James Madison", "Patrick Henry", "Samuel Adams"
      ],
      correctAnswer: "Patrick Henry"
    }]
  }, {
    elements: [{
      type: "radiogroup",
      name: "magnacarta",
      title: "What is Magna Carta?",
      choicesOrder: "random",
      choices: [
        "The foundation of the British parliamentary system",
        "The Great Seal of the monarchs of England",
        "The French Declaration of the Rights of Man",
        "The charter signed by the Pilgrims on the Mayflower"
      ],
      correctAnswer: "The foundation of the British parliamentary system"
    }]
  }],
  completedHtml: "<h4>You got <b>{correctAnswers}</b> out of <b>{questionCount}</b> correct answers.</h4>",
  completedHtmlOnCondition: [{
    expression: "{correctAnswers} == 0",
    html: "<h4>Unfortunately, none of your answers are correct. Please try again.</h4>"
  }, {
    expression: "{correctAnswers} == {questionCount}",
    html: "<h4>Congratulations! You answered all the questions correctly!</h4>"
  }]
};

Refer to the following platform-specific articles for information on how to render the quiz in your application:

• Render the Survey - Angular
• Render the Survey - Vue
• Render the Survey - React
• Render the Survey - HTML/CSS/JavaScript

View Full Code on GitHub

• Create a Multi-Page Survey
• Conditional Logic and Dynamic Texts
• Access Survey Results
• Review Quiz Results demo