Hola, tenemos la solución a tu búsqueda, deslízate y la encontrarás a continuación.
Ejemplo 1: crea una trivia y responde javascript
// code by webdevtrick (https://webdevtrick.com)functionQuiz(questions)this.score=0;this.questions= questions;this.questionIndex=0;Quiz.prototype.getQuestionIndex=function()returnthis.questions[this.questionIndex];Quiz.prototype.guess=function(answer)if(this.getQuestionIndex().isCorrectAnswer(answer))this.score++;this.questionIndex++;Quiz.prototype.isEnded=function()returnthis.questionIndex===this.questions.length;functionQuestion(text, choices, answer)this.text= text;this.choices= choices;this.answer= answer;Question.prototype.isCorrectAnswer=function(choice)returnthis.answer=== choice;functionpopulate()if(quiz.isEnded())showScores();else// show questionvar element =document.getElementById("question");
element.innerHTML= quiz.getQuestionIndex().text;// show optionsvar choices = quiz.getQuestionIndex().choices;for(var i =0; i < choices.length; i++)var element =document.getElementById("choice"+ i);
element.innerHTML= choices[i];guess("btn"+ i, choices[i]);showProgress();;functionguess(id, guess)var button =document.getElementById(id);
button.onclick=function()
quiz.guess(guess);populate();;functionshowProgress()var currentQuestionNumber = quiz.questionIndex+1;var element =document.getElementById("progress");
element.innerHTML="Question "+ currentQuestionNumber +" of "+ quiz.questions.length;;functionshowScores()var gameOverHTML ="Result
";
gameOverHTML +=" Your scores: "
+ quiz.score+"";var element =document.getElementById("quiz");
element.innerHTML= gameOverHTML;;// create questions herevar questions =[newQuestion("Hyper Text Markup Language Stand For?",["JavaScript","XHTML","CSS","HTML"],"HTML"),newQuestion("Which language is used for styling web pages?",["HTML","JQuery","CSS","XML"],"CSS"),newQuestion("Which is not a JavaScript Framework?",["Python Script","JQuery","Django","NodeJS"],"Django"),newQuestion("Which is used for Connect To Database?",["PHP","HTML","JS","All"],"PHP"),newQuestion("Webdevtrick.com is about..",["Web Design","Graphic Design","SEO & Development","All"],"All")];// create quizvar quiz =newQuiz(questions);// display quizpopulate();
Ejemplo 2: crea una trivia y responde javascript
/** code by webdevtrick (https://webdevtrick.com) **/
body
background-color: #413D3D;.grid
width:600px;
height:500px;
margin:0 auto;
background-color: #fff;
padding:10px 50px 50px 50px;
border:2px solid #cbcbcb;.grid h1
font-family:"sans-serif";
background-color: #01BBFF;
font-size:60px;
text-align: center;
color: #ffffff;
padding:2px 0px;
#score
color: #01BBFF;
text-align: center;
font-size:30px;.grid #question
font-family:"monospace";
font-size:30px;
color: #01BBFF;.buttons
margin-top:30px;
#btn0, #btn1, #btn2, #btn3
background-color: #01BBFF;
width:250px;
font-size:20px;
color: #fff;
border:1px solid #1D3C6A;
margin:10px 40px 10px 0px;
padding:10px 10px;
#btn0:hover, #btn1:hover, #btn2:hover, #btn3:hover
cursor: pointer;
background-color: #01BBFF;
#btn0:focus, #btn1:focus, #btn2:focus, #btn3:focus
outline:0;
#progress
color: #2b2b2b;
font-size:18px;
Puedes asentar nuestra tarea mostrando un comentario y dejando una valoración te estamos agradecidos.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)