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
<!DOCTYPE html><!-- code by webdevtrick(https://webdevtrick.com)--><html><head lang="en"><meta charset="UTF-8"><title>Quiz</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><div class="grid"><div id="quiz"><h1>QuizinJavaScriptWebdevtrick.com</h1><hr style="margin-bottom: 20px"><p id="question"></p><div class="buttons"><button id="btn0"><span id="choice0"></span></button><button id="btn1"><span id="choice1"></span></button><button id="btn2"><span id="choice2"></span></button><button id="btn3"><span id="choice3"></span></button></div><hr style="margin-top: 50px"><footer><p id="progress">Question x of y</p></footer></div></div><script src="question.js"></script></body></html>Si te sientes suscitado, puedes dejar una noticia acerca de qué le añadirías a este tutorial.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)