[英]How to create a quiz that has different questions on different pages?
I want to create a small quiz at the end of each of page.我想在每一页的末尾创建一个小测验。 I have a quiz written on JavaScript but I want different questions to appear in different pages.我有一个用 JavaScript 编写的测验,但我希望不同的问题出现在不同的页面中。 In a few words, I want the const myQuestions to change if i am on different pages.简而言之,如果我在不同的页面上,我希望 const myQuestions 改变。 How can I achieve this?我怎样才能做到这一点?
I already tried with if statements but I couldn't achieve what I want.我已经尝试过 if 语句,但我无法实现我想要的。 Any help would be greatly appreciated!任何帮助将不胜感激!
This is the JS code of the quiz这是测验的JS代码
(function() {
const myQuestions = [
{
question: "question 1?",
answers: {
a: "one",
b: "two",
c: "three"
},
correctAnswer: "c"
},
{
question: "question 2?",
answers: {
a: "one",
b: "two",
c: "three"
},
correctAnswer: "c"
},
{
question: "question 3?",
answers: {
a: "one",
b: "two",
c: "three"
d: "four"
},
correctAnswer: "d"
}
];
function buildQuiz() {
// we'll need a place to store the HTML output
const output = [];
// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// we'll want to store the list of answer choices
const answers = [];
// and for each available answer...
for (letter in currentQuestion.answers) {
// ...add an HTML radio button
answers.push(
`<label>
<input type="radio" name="question${questionNumber}" value="${letter}">
${letter} :
${currentQuestion.answers[letter]}
</label>`
);
}
// add this question and its answers to the output
output.push(
`<div class="slide">
<div class="question"> ${currentQuestion.question} </div>
<div class="answers"> ${answers.join("")} </div>
</div>`
);
});
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join("");
}
function showResults() {
// gather answer containers from our quiz
const answerContainers = quizContainer.querySelectorAll(".answers");
// keep track of user's answers
let numCorrect = 0;
// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// find selected answer
const answerContainer = answerContainers[questionNumber];
const selector = `input[name=question${questionNumber}]:checked`;
const userAnswer = (answerContainer.querySelector(selector) || {}).value;
// if answer is correct
if (userAnswer === currentQuestion.correctAnswer) {
// add to the number of correct answers
numCorrect++;
// color the answers green
answerContainers[questionNumber].style.color = "lightgreen";
} else {
// if answer is wrong or blank
// color the answers red
answerContainers[questionNumber].style.color = "red";
}
});
// show number of correct answers out of total
resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`;
}
function showSlide(n) {
slides[currentSlide].classList.remove("active-slide");
slides[n].classList.add("active-slide");
currentSlide = n;
if (currentSlide === 0) {
previousButton.style.display = "none";
} else {
previousButton.style.display = "inline-block";
}
if (currentSlide === slides.length - 1) {
nextButton.style.display = "none";
submitButton.style.display = "inline-block";
} else {
nextButton.style.display = "inline-block";
submitButton.style.display = "none";
}
}
function showNextSlide() {
showSlide(currentSlide + 1);
}
function showPreviousSlide() {
showSlide(currentSlide - 1);
}
const quizContainer = document.getElementById("quiz");
const resultsContainer = document.getElementById("results");
const submitButton = document.getElementById("submit");
// display quiz right away
buildQuiz();
const previousButton = document.getElementById("previous");
const nextButton = document.getElementById("next");
const slides = document.querySelectorAll(".slide");
let currentSlide = 0;
showSlide(0);
// on submit, show results
submitButton.addEventListener("click", showResults);
previousButton.addEventListener("click", showPreviousSlide);
nextButton.addEventListener("click", showNextSlide);
})();
Mileage may vary, depends on what you want to do.里程可能会有所不同,这取决于您想要做什么。 With just javascript, you could pass windows.location.pathname
to your function each time it's called and choose the appropriate object of questions related to the path you need.只需使用 javascript,您就可以在每次调用时将windows.location.pathname
传递给您的函数,并选择与您需要的路径相关的适当问题对象。
if (windows.location.pathname).includes('page1') {
let currentQuestion = myQuestions[0]
}
//...rest of the logic
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.