I want to show all questions in one page for my quiz.
I have tried but I can’t understand how to do it. It has 8 questions but they all come one after the other. I want that all these questions appear together in one page and not one after the other.
I am giving a link here for example just like that I want to show the question. [Example Link
const myQuestions = [{
‘question’: “How much amount will be provided by NITI Aayog to every district to encourage digital payment system?”,
‘answers’: [“Rs 1 lakh”, “Rs 2 lakh”, “Rs 5 lakh”, “Rs 10 lakh”],
‘correct’: 2
}, {
‘question’: ‘What is the Full-form of GST?’,
‘answers’: [“Good and Supply Tax”, “Goods and Services Tax”, “Good and Service Tax”, “Great Service Tax”],
‘correct’: 1
}, {
‘question’: ‘Upper limit on investment in Kisan Vikas Patra (KVP)?’,
‘answers’: [“5000”, “10000”, “50000”, “25000”],
‘correct’: 0
}, {
‘question’: “Which insurance company has come up with India’s first ever insurance cover for individual victims of cyber crime?”,
‘answers’: [“ICICI”, “Muthoot Finance”, “LIC”, “Bajaj Allianz”],
‘correct’: 2
},
{
‘question’: “Who is the founder of Amazon?”,
‘answers’: [“John Mackey”, “Jeff Bezos”, “Lee Byung-chul”, “Howard Shultz”],
‘correct’: 1
}, {
‘question’: “When was Amazon founded?”,
‘answers’: [“2005”, “2002”, “1996”, “1994”],
‘correct’: 3
}, {
‘question’: “What does the internet prefix WWW stand for?”,
‘answers’: [“Western Web World”, “World Wide Web”, “World Wide World”, “We Wide Web”],
‘correct’: 1
}, {
‘question’: “What is the most used web browser in 2017?”,
‘answers’: [“Safari”, “Internet Explorer”, “Chrome”, “Firefox”],
‘correct’: 2
}
];
var score = 0;
var current = 0;
var answeredQuestions = []
var rand = Math.floor((Math.random() * myQuestions.length) + 0);
$(document).ready(function() {
$(“.start-btn”).click(function() {
$(‘.start-quiz’).hide();
$(‘.next-ans’).hide();
$(‘.questions’).show();
displayQuestion();
});
$(“.next-btn”).click(function(event) {
displayQuestion();
$(‘.next-ans’).hide();
$(‘.ans-submit’).show();
});
$(“.submit-btn”).click(function(event) {
if ($(‘li.selected’).length) {
var answer = $(‘li.selected’).attr(‘id’);
checkAnswer(answer);
$(‘.next-ans’).show();
$(‘.ans-submit’).hide();
} else {
alert(‘Please select an answer’);
}
});
$(“.retake-btn”).click(function() {
location.reload();
console.log(“Retake button clicked”);
});
$(‘ul.ans-list’).on(‘click’, ‘li’, function(event) {
$(‘.selected’).removeClass();
$(this).addClass(‘selected’);
});
});
function displayQuestion() {
if (answeredQuestions.length < myQuestions.length) {
if ($.inArray(rand, answeredQuestions) != -1)
{
while($.inArray(rand, answeredQuestions) != -1) { rand = Math.floor((Math.random() * myQuestions.length) + 0) }
}
answeredQuestions.push(rand)
var randomQuestion = myQuestions[rand];
$(‘h2’).text(randomQuestion.question);
$(‘ul.ans-list’).html(”);
for (var i = 0; i < randomQuestion.answers.length; i++) {
$(‘ul.ans-list’).append(‘<li id = “‘ + i + ‘”>’ + randomQuestion.answers[i] + ‘</li>’);
}
} else {
// show summary that says how many you got correct
displayScore();
}
}
function checkAnswer(answer) {
var listQuestion = myQuestions[rand];
var obj = { index: rand, answer: answer, correct: listQuestion.correct, result: listQuestion.correct == answer }
if (listQuestion.correct == answer) {
score++;
$(‘li.selected’).addClass(‘correct’);
} else {
$(‘li.selected’).addClass(‘incorrect’);
$(‘li’).eq(listQuestion.correct).addClass(‘correct’);
}
current++;
}
function displayScore() {
$(‘.questions’).hide();
$(‘.end-quiz’).show();
$(‘.total-que’).text(“Total Questions: ” + (myQuestions.length));
$(‘.correct-que’).text(“Correct Answers: ” +score);
$(‘.end-score’).text(“Total Score: ” + score );
}