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 class='" +  (isCorrect ? "correctAnswer" : "incorrectAnswer" ) + "'>" +  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));        
            var app = new Vue({
            el: '#surveyElement',
            data:
            {
            survey: survey
            }
            });
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Review Quiz results, Vue Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-vue-ui/survey-vue-ui.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%;">
                                    <survey :survey='survey' />
            </div>
    <div id="surveyResult"></div>

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

</body>
</html>

.correctAnswer {
    color: green;
}
.incorrectAnswer {
    color: red;
}
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.