Wednesday, March 22, 2023
HomeCSSjavascript - any type of ideas for shuffle the test?

javascript – any type of ideas for shuffle the test?


This source I obtained from Google, I have actually attempted exactly how to make the test arbitrary however I really did not discover a great way to randomize the test.

Exists a simple means to randomize the test? I attempted making use of shuffle however it fell short, possibly since I’m still a newbie so I still do not have expertise.

html css

<.
<< html>>.
<< head lang=" en">
<> < meta charset=" UTF-8">
<> < title>> Photo Test<.
<< design>>.
body {
background-color: #eeeeee;
}
. grid {
size: 68%;
elevation: 520px;
margin: 0 automobile;
background-color: #fff;
extra padding: 10px 50px 50px 50px;.
border-radius: 50px;.
boundary: 2px strong #cbcbcb;.
box-shadow: 10px 15px 5px #cbcbcb;.
}

. switches img.
{
size:200 px;.
}
. grid h1 {
font-family: "sans-serif";.
background-color: #ffc 107;.
font-size: 35px;.
text-align: facility;.
shade: #ffffff;.
extra padding: 2px 0px;.
border-radius: 50px;.
}
human resources.
{
margin-top: 50px;.
shade: red;.
background-color: #ffc 107;.
elevation: 2px;.
boundary: none;.
}
#score {
shade: #ffc 107;.
text-align: facility;.
font-size: 30px;.
}

. grid #question {
font-family: "monospace";.
font-size: 30px;.
shade: #ffc 107;.
}

. switches {
margin-top: 30px;.
}

#btn 0,.
#btn 1,.
#btn 2,.
#btn 3 {

extra padding: 0px;.
font-size: 20px;.
shade: #fff;.
boundary: none;.
margin: 10px 20px 10px 0px;.

}

#btn 0: float,.
#btn 1: float,.
#btn 2: float,.
#btn 3: float {
arrow: reminder;.
background-color: #ffc 107;.
}

#btn 0: emphasis,.
#btn 1: emphasis,.
#btn 2: emphasis,.
#btn 3: emphasis {
overview: 0;.
}

#progress {
shade: # 2b2b2b;.
font-size: 18px;.
}
<.
<.
<< body>>.
<< div course=" grid">
<> < div id=" test">
<> < h1>> Photo Test<.
<< human resources design=" margin-bottom: 20px">>.
<< p id=" inquiry"><>  < div course=" switches">
<> < switch id=" btn0"><> < period id=" choice0"><>   < switch id=" btn1"><> < period id=" choice1"><>   < switch id=" btn2"><> < period id=" choice2"><>   < switch id=" btn3"><> < period id=" choice3"><>   .
<< human resources design=" margin-top: 50px">>.
<< footer>>.
<< p id=" development">> Concern x of y<.
<.
<.
<.
<.
<< manuscript src=" index.js" kind=" text/javascript"><>  .

javascript

 var photos = {
" pet": "dog.jpg",.
" cow": "cow.jpg",.
" feline": "cat.jpg",.
" goat": "goat.jpg",.
" deer": "deer.jpg",.
" chicken": "hen.jpg",.
" lion": "lion.jpg",.
" parrot": "parrot.jpg",.
" tiger": "tiger.jpg".

}
feature occupy() {
if (quiz.isEnded()) {
showScores();.
} else {
// reveal inquiry.
var component = document.getElementById(" inquiry");.
element.innerHTML = quiz.getQuestionIndex(). message;.

// program choices.
var options = quiz.getQuestionIndex(). options;.
for (var i = 0; i < < choices.length; i++) {
var component = document.getElementById(" option" + i);.
element.innerHTML = photos[choices[i]] '<< img src="'+ photos[choices[i]] +'"/>>': options[i];.
hunch(" btn" + i, options[i]);.
}

showProgress();.
}
};.

feature hunch( id, hunch) {
var switch = document.getElementById( id);.
button.onclick = feature() {
quiz.guess( hunch);.
occupy();.
}
};.

feature showProgress() {
var currentQuestionNumber = quiz.questionIndex + 1;.
var component = document.getElementById(" development");.
element.innerHTML="Concern" + currentQuestionNumber +" of" + quiz.questions.length;.
};.

feature showScores() {
var gameOverHTML="<< h1>> Outcome<";.
gameOverHTML += "<< h2 id=' rating'> > Your ratings:" + quiz.score + "<";.
var component = document.getElementById(" test");.
element.innerHTML = gameOverHTML;.
};.

// produce concerns.
var concerns = [
new Question("Which one is dog?", ["cow", "goat", "cat", "dog"], "pet"),.
brand-new Concern(" pick tiger listed below", ["parrot", "deer", "tiger", "lion"], "tiger"),.
brand-new Concern(" pick parrot pls?", ["hen", "parrot", "goat",  "dog"], "parrot"),.
brand-new Concern(" Discover feline listed below?", ["parrot", "goat", "cat", "tiger"], "feline"),.
brand-new Concern(" pick lion pls?", ["lion", "goat", "tiger", "dog"], "lion").
];.

feature Concern( message, options, solution) {
this.text = message;.
this.choices = options;.
this.answer = solution;.
}

Question.prototype.isCorrectAnswer = feature( option) {
return this.answer === option;.
}


feature Test( concerns) {
this.score = 0;.
this.questions = concerns;.
this.questionIndex = 0;.
}

Quiz.prototype.getQuestionIndex = feature() {
return this.questions[this.questionIndex];.
}

Quiz.prototype.guess = feature( solution) {
if (this.getQuestionIndex(). isCorrectAnswer( solution)) {
this.score++;.
}

this.questionIndex++;.
}

Quiz.prototype.isEnded = feature() {
return this.questionIndex === this.questions.length;.
}

// produce test.
var test = brand-new Test( concerns);.

// display screen test.
occupy();.

I attempted if it was revitalized or responded to on it would certainly raise an arbitrary test.
enter image description here

RELATED ARTICLES

Most Popular

Recent Comments