CODEWITHSUNDEEP
javascripthtmljquerywordpress
Roy Smith
Roy Smith

Reputation: 51

I want to create quiz

i want to create quiz using javascript. 

<!DOCTYPE html>
<html>
<head>
    <script>
        function generateQuiz(questions, quizContainer, resultsContainer, submitButton){
    function showQuestions(questions, quizContainer){
    }
    function showResults(questions, quizContainer, resultsContainer){
        }
    showQuestions(questions, quizContainer);
    submitButton.onclick = function(){
        showResults(questions, quizContainer, resultsContainer);
    }
}
var myQuestions = [
    {
        question: "What is 10/2?",
        answers: {
            a: '3',b: '5',c: '115'
        },
        correctAnswer: 'b'
    },
    {
        question: "What is 30/3?",
        answers: {
            a: '3',b: '5',c: '10'
        },
        correctAnswer: 'c'
    }
];
function showQuestions(questions, quizContainer){
    var output = [];
    var answers;
    for(var i=0; i<questions.length; i++){      
        answers = [];
        for(letter in questions[i].answers){
            answers.push(
                '<label>'
                    + '<input type="radio" name="question'+i+'" value="'+letter+'">'
                    + letter + ': '
                    + questions[i].answers[letter]
                + '</label>'
            );
        }
        output.push(
            '<div class="question">' + questions[i].question + '</div>'
            + '<div class="answers">' + answers.join('') + '</div>'
        );
    }
    quizContainer.innerHTML = output.join('');
}
showQuestions(questions, quizContainer);
function showResults(questions, quizContainer, resultsContainer){
    var answerContainers = quizContainer.querySelectorAll('.answers');
    var userAnswer = '';
    var numCorrect = 0;
    for(var i=0; i<questions.length; i++){
        userAnswer = (answerContainers[i].querySelector('input[name=question'+i+']:checked')||{}).value;
        if(userAnswer===questions[i].correctAnswer){
            numCorrect++;
            answerContainers[i].style.color = 'lightgreen';
        }
        else{
            answerContainers[i].style.color = 'red';
        }
    }
    resultsContainer.innerHTML = numCorrect + ' out of ' + questions.length;
}
submitButton.onclick = function(){
    showResults(questions, quizContainer, resultsContainer);
}
var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');
generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);
    </script>
</head>
<body>
<div id="quiz"></div>
<button id="submit">Get Results</button>
<div id="results"></div>
</body>
</html>

this is my quiz.html code but I can't get questions in the browser. how can shows questions in the browser and get result?

How to create quiz like fill in blanks, reorder question, etc...

also I want to put this code in Wordpress custom plugin. how I create a custom plugin in Wordpress for the quiz?

Upvotes: 0

Views: 148

Answers (1)

Khelthos
Khelthos

Reputation: 36

How to create quiz like fill in blanks, reorder question, etc...

You should store the correct answers on const variables, you should use an array of strings for the "blanks" ones and refer to them by index/question number:

const answers = [ "Cygnus", "Rainbows", "42" ];
const questions = [ "What spacecraft has NASA launched several times to supply the ISS?", "What is the name of those optical atmospheric phenomena that produce an almost continuous spectrum of light in the sky when sunlight passes through water drops?", "What is the meaning of life itself?" ];

From here it's simple, you know that questions and answers are paired by array indexes:

// ans - hypothetical variable that contains the text of the user's answer
let answer0 = (ans.includes(answer[0])) ? "Well done!" : "Wrong!";

Or you could be more restrictive on the answer with:

let answer0 = (ans === answer[0]) ? "Well done!" : "Wrong!";

About "reorder question" I'll use always arrays, but comparing a const correct array with the user/player answer array.

Upvotes: 1

Related Questions