On Completion display result and a button to render survey in display mode

RmR

created 5 years ago

On completion of a quiz I wish to show a result text with a button that the user can click to see the result in display mode

This is what I have done

JavaScript
...
survey.showCompletedPage = false;
        survey
            .onComplete
            .add(function (result) {
                const correct = _self._getResult(survey, result);
                const _questions = survey.getAllQuestions(true);
                const _total = _questions.length;
                _self._shadowRoot.querySelector('#surveyResult')
                    .textContent = `You got ${correct} answers correct out of ${_total}`;

                 // HERE I WOULD LIKE A BUTTON WHOSE ONCLICK SHOULD DISPLAY THE QUIZ IN DISPLAY MODE
                 //
                 // WITHOUT A BUTTON I TRIED THE BELOW TWO COMMANDS BUT IT DOES NOT SHOW THE QUIZ
                _self.survey.mode = 'display';
                _self.survey.render();
            });
        if (this.survey.mode == 'display') {
            survey
                .onAfterRenderQuestion
                .add(function (survey, options) {
                    var span = document.createElement("span");
                    var isCorrect = options.question.isAnswerCorrect();
                    span.innerHTML = isCorrect ? "Correct" : "Incorrect";
                    span.style.color = isCorrect ? "green" : "red";
                    var header = options
                        .htmlElement
                        .querySelector("h5");
                    if (!isCorrect) {
                        header.style.backgroundColor = "salmon";
                        var radio = options
                            .htmlElement.querySelector('input[value="' + options.question.correctAnswer + '"]');
                        if (!!radio) {
                            radio.parentElement.style.color = "green";
                        }
                    }
                    header.appendChild(span);
                });
        }

 _getSurveyResult (survery, data) {
        const sdata = result.data;
        let correct = 0;
        Object.keys(sdata).forEach(item => {
          const qdata = sdata[item];
          const question = survey.getQuestionByName(item);
          if (qdata == question.correctAnswer)
            correct++;
        });
        return correct;
 }

Thanks,

Answers approved by surveyjs Support

Andrew Telnov

created 5 years ago

Hello,
Please review the following example.
Additional you should change the code. You should assign onAfterRenderQuestion event from the beginning. Something like:

JavaScript
survey .onAfterRenderQuestion .add(function (survey, options) {
  if(survey.mode !== "display") return;
  //Your code here
});

Thank you,
Andrew
SurveyJS Team

Show previous comments (3)

RmR 5 years ago

Hello Andrew:

I think I did make it clear.

After the user has completed the quiz, I would like to do two things:

(a) Show the user the result
(b) and either with a button click or otherwise show the user the quiz again in display-mode with the answers marked as correct or incorrect.

What I am able to do is (a) but on the same screen I am unable to do (b)

I now have a button that says 'Show Result' but do not know what code must be in it to render the quiz again in display mode. I tried putting survey.render() nothing happens

Thanks,

Andrew Telnov 5 years ago

I am suggesting you to create a new survey. It can use the same container (DIV) or a new one. You will have to use the same JSON for creating this survey, pass the data: displaySurvey.data = survey.data; and set the display mode.

Thank you,
Andrew
SurveyJS Team

RmR 5 years ago

Oh ok. Thanks will try that

Daniël 5 years ago

Hello Andrew.

I try to set Review Quiz answers correct and incorrect answers page. How can we set the Review Quiz results display page like this example from surveyjs https://surveyjs.io/Examples/Library?id=survey-quiz-results&platform=jQuery&theme=modern#content-result in the code below?

This is the code we have where we want the Review Quiz answers to appear in the end…

<!DOCTYPE html>
<html lang="pt">
<head>
<title>The example shows how to go to the next page automatically, jQuery Survey Library Example</title><meta name="viewport" content="width=device-width"/>
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/survey-jquery@1.8.20/survey.jquery.min.js"></script>
<link href="https://unpkg.com/survey-knockout@1.8.20/modern.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="./index.css"></head>
<body>
<button id="rerunsurvey" onclick="rerunSurvey()" style="background-color:#1CB394;color:white;;width:150px;height:40px;display:none">Tente novamente</button><p>

JavaScript

function rerunSurvey() {
survey.clear(true, true);
document.getElementById("rerunsurvey").style.display = "none";
}

Survey
.StylesManager
.applyTheme("modern");

var json = {
"locale": "pt",
title: "American History",
showProgressBar: "bottom",
showTimerPanel: "top",
maxTimeToFinishPage: 30,
maxTimeToFinish: 600,
firstPageIsStarted: true,
startSurveyText: "Iniciar o Quiz",
pages: [
{
questions: [
{
type: "html",
html: "Testar seu conhecimento! Você está prestes a começar um questionário sobre o Christmas (Natal). Escolha a resposta correta a partir das respostas em inglês.</br><br/>Você tem 30 segundos para cada pergunta e 10 minutos para toda a pesquisa de 20 perguntas. Por favor, clique em <b>'Iniciar o Quiz'</b> quando você estiver pronto. <br><br>Boa sorte!"
}
]
}, {
questions: [
{
type: "radiogroup",
name: "civilwar",
title: "When was the Civil War?",
choices: ["1750-1800", "1800-1850", "1850-1900", "1900-1950", "after 1950"]
}
]
}, {
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"]
}
]
}, {
maxTimeToFinish: 600,
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"]
}
]
}
],
completedHtml: "<p>Your anwers are:</p><p>When was the Civil War?: <b>{civilwar}</b>. The correct is: <b>1850-1900</b></p><p>Who said 'Give me liberty or give me death?': <b>{libertyordeath}</b>. The correct is: <b>Patrick Henry</b></p><p>What is the Magna Carta?: <b>{magnacarta}</b>. The correct is: <b>The foundation of the British parliamentary system</b></p>"
};

window.survey = new Survey.Model(json);

survey
.onComplete
.add(function (result) {
//Make the rerun survey visible
document.getElementById("rerunsurvey").style.display = "";
document
.querySelector('#surveyResult')
.textContent = "Resultado:\n" + JSON.stringify(result.data, null, 3);
});

$("#surveyElement").Survey({model: survey});

</script>

Andrew Telnov 5 years ago

Hello Daniël,
We are going to implement the Result Page in Survey. I guess, we will support correct answers as well. However, we are really busy with other our tasks and we can't provide you with any time-frame at the current moment.
Please ask somebody with some JavaScript skills to make this job for you.

Thank you,
Andrew
SurveyJS Team

Daniël 5 years ago

Hello Andrew!

Thank you for your answer!

I hope that the Result Page in Survey will be added to the quiz! We need this functionality.

I wish you and your colleagues happy holidays!

Thank you for the excellent service and support!

Daniël

Inglês 24 Horas

Van: Andrew Telnov [surveyjs Support] <support@surveyjs.io>
Verzonden: maandag 14 december 2020 09:33
Aan: daangasthaus@hotmail.com <daangasthaus@hotmail.com>
Onderwerp: RE: On Completion display result and a button to render survey in display mode [T4467]

On Completion display result and a button to render survey in display mode

Answers approved by surveyjs Support

Recently viewed tickets