Cart Licenses Contact Support Online Creator Log in/Register
Try
Buy
v 1.9.51

Review Quiz results


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        



                
                    var json = {
  "title": "American History",
  "showProgressBar": "bottom",
  "showTimerPanel": "top",
  "maxTimeToFinishPage": 10,
  "maxTimeToFinish": 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 is correct. Please try again.</h4>"
    },
    {
      "expression": "{correctAnswers} == {questionCount}",
      "html": "<h4>Congratulations! You answered all the questions correctly!</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);
            });
        
survey.data = {civilwar: "1850-1900", libertyordeath: "Samuel Adams", magnacarta: "The foundation of the British parliamentary system"};

survey.mode = "display";
survey.questionsOnPageMode = "singlePage";
survey.showNavigationButtons = "none";
survey.showProgressBar = "off";
survey.showTimerPanel = "none";
survey.maxTimeToFinishPage = 0;
survey.maxTimeToFinish = 0;
const correctStr = "Correct";
const inCorrectStr = "Incorrect";

function getTextHtml(text, str, isCorrect) {
    if (text.indexOf(str) < 0) return undefined;
    return text.substring(0, text.indexOf(str)) +  "<span style='color:" +  (isCorrect ? "green" : "red" ) + "'>" +  str + "</span>";
}
function isAnswerCorrect(q) {
    const right=q.correctAnswer;
    if(!right || q.isEmpty()) return undefined;
    var left=q.value;
    if(!Array.isArray(right)) return right == left;
    if(!Array.isArray(left)) left=[left];
    for(var i=0; i < left.length; i ++) {
        if(right.indexOf(left[i]) < 0) return false;
    }
    return true;
}

function renderCorrectAnswer(q) {
    if(!q) return;
    const isCorrect = isAnswerCorrect(q);
    if (!q.prevTitle) {
        q.prevTitle = q.title;
    }
    if(isCorrect === undefined) {
        q.title = q.prevTitle;
    }
    q.title =  q.prevTitle + ' ' + (isCorrect ? correctStr : inCorrectStr);
}

survey.onValueChanged.add((sender, options) => {
    renderCorrectAnswer(options.question);
});

survey.onTextMarkdown.add((sender, options) => {
    var text = options.text;
    var html = getTextHtml(text, correctStr, true);
    if (!html) {
        html = getTextHtml(text, inCorrectStr, false);
    }
    if (!!html) {
        options.html = html;
    }
});

survey.getAllQuestions().forEach(q => renderCorrectAnswer(q));        
            $("#surveyElement").Survey({
            model: survey 
            });
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Review Quiz results, 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 href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

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

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

</body>
</html>