Saltar al contenido

cómo crear un juego de preguntas y respuestas en el ejemplo de código html

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)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *