The example shows how to create a Quiz, jQuery Survey Library Example

Quiz

Open in new window

Export Pdf

Result
JavaScript
HTML
QR Code


                        
        
            Survey.StylesManager.applyTheme("bootstrap");
            Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
        


            
                var json = {
  title: "American History",
  showProgressBar: "bottom",
  showTimerPanel: "top",
  maxTimeToFinishPage: 10,
  maxTimeToFinish: 25,
  firstPageIsStarted: true,
  startSurveyText: "Start Quiz",
  pages: [
    { questions: [ {type: "html", html: "You are about to start quiz by history. <br/>You have 10 seconds for every page and 25 seconds for the whole survey of 3 questions.<br/>Please click on <b>'Start Quiz'</b> button when you are ready." } ] },
    {
      questions: [
        {
          type: "radiogroup",
          name: "civilwar",
          title: "When was the Civil War?",
          choices: [ "1750-1800", "1800-1850", "1850-1900", "1900-1950", "after 1950" ],
          correctAnswer: "1850-1900"
        }
      ]
    },
    {
      questions: [
        {
          type: "radiogroup",
          name: "libertyordeath",
          title: "Who said 'Give me liberty or give me death?'",
          choicesOrder: "random",
          choices: [ "John Hancock", "James Madison", "Patrick Henry", "Samuel Adams" ],
          correctAnswer: "Patrick Henry"
        }
      ]
    },
    {
      maxTimeToFinish: 15,
      questions: [
        {
          type: "radiogroup",
          name: "magnacarta",
          title: "What is the 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 have answered correctly <b>{correctedAnswers}</b> questions from <b>{questionCount}</b>.</h4>"
};

                window.survey = new Survey.Model(json);
            
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
        
            $("#surveyElement").Survey({
            model: survey 
            });
        
;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>The example shows how to create a Quiz, jQuery Survey Library Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
    <script src="/DevBuilds/survey-jquery/survey.jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">

</head>
<body>
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>

settings

You may use the first page as the start page.

survey.firstPageIsStarted = true;

You may hide the previous button from the navigation.

survey.showPrevButton = false;

You may set the maximum time to complete the survey (in seconds)

survey.maxTimeToFinish = 30;

and/or pages in seconds

survey.maxTimeToFinishPage = 10;

You may override the default time for a specific page

survey.pages[0].maxTimeToFinish = 20;

You may always start or stop timer.

survey.startTimer();

survey.stopTimer();

Show timer panel on top or bottom. If showTimerPanel value is different from "none", the startTimer() function is called on render.

survey.showTimerPanel = "top";

Use showTimerPanelMode property or/and onTimerPanelInfoText event to control the timer panel text.

survey.showTimerPanelMode = "page";

Use question.correctAnswer to the set correct answer to questions. After that you may use {correctedAnswers} and {inCorrectedAnswers} variables, for example in completedHtml.

Quiz

The example shows how to create a Quiz

Why We Use Cookies