Databases
StackOverflow2013
Postsdbo
POcomparing responses in dynamic quiz with jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcomparing responses in dynamic quiz with jquery
    text
    copied!<p>hi im totally noob at jquery im trying to leanr so i decided to make a dynamic quiz in order to improve my skills i've been doing it one step at a time an then try to wrap it all togheter. I got stuck in the way of how to check wich one of my checkbox is checked to compare if its the correct answer and then update the question and the answers. here is my html:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang='es'&gt; &lt;head&gt; &lt;meta charset='UTF-8'&gt; &lt;title&gt;Dynamic Quiz&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="css/normalize.css"&gt; &lt;link rel="stylesheet" type="text/css" href="css/estilos.css"&gt; &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/prefixfree.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/codigo.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;hgroup&gt; &lt;h1&gt;This is my Dynamic Quiz&lt;/h1&gt; &lt;h2&gt;Using html5 / css / javascript&lt;/h2&gt; &lt;/hgruop&gt; &lt;/header&gt; &lt;section id='description'&gt; &lt;p&gt;This quiz is compossed by 10 questions, you have to answer at least 7 from 10 to pass the exam.&lt;/p&gt; &lt;h2&gt;Lets start!&lt;/h2&gt; &lt;/section&gt; &lt;div id='questions-number'&gt; &lt;p&gt;Question &lt;span id='current-question'&gt;1&lt;/span&gt; of &lt;span&gt;10&lt;/span&gt; &lt;/p&gt; &lt;/div&gt; &lt;section id='questions'&gt; &lt;p id='question'&gt;&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;input type='checkbox' id='checkAnswer0'/&gt;&lt;label id='answer0'&gt;answer0&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;input type='checkbox' id='checkAnswer1'/&gt;&lt;label id='answer1'&gt;answer1&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;input type='checkbox' id='checkAnswer2'/&gt;&lt;label id='answer2'&gt;answer2&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;input type='checkbox' id='checkAnswer3'/&gt;&lt;label id='answer3'&gt;answer3&lt;/label&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/section&gt; &lt;div id='next'&gt; next &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>and this is what i got in jquery so far :)</p> <pre><code>$(document).on('ready', ready); function ready(){ var allQuestions = [ { question1: "Whats my real name?", choices1: ["Jhonnatan", "Alberto", "Tatan","Jaime"], answer1: 0 }, { question2: "Who is Colombia's president?", choices2: ["Alvaro Uribe", "Andres Pastrana", "Juan Manuel Santos","Tatan"], answer2: 2 }, { question3: "My favorite super heroe?", choices3: ["Batman", "Flash", "Tatan","Javascript"], answer3: 3 }, { question4: "Wich sports do i practice?", choices4: ["Climbing", "Swimming", "Programming","Running"], answer4: 0 }, { question5: "Whats my dad's name?", choices5: ["Alberto", "Jorge", "Javier","Jose"], answer5: 1 }, { question6: "Whats my favorite color?", choices6: ["Red", "Purple", "Blue","All"], answer6: 2 }, { question7: "My favorite alcoholic drink", choices7: ["Vodka", "Aguardiente", "Rum","Tekila"], answer7: 3 }, { question8: "Whats my favorite kind of music?", choices8: ["Hardcore", "Reggaeton", "Salsa","Programming"], answer8: 0 }, { question9: "How many qestions has this quiz??", choices9: ["20", "8", "10","12"], answer9: 2 }, { question10: "My favorite programming lenguage?", choices10: ["Ruby", "Arduino", "Python","Javascript"], answer10: 3 } ]; var question = $('#question'); var choice1 = $('#answer0'); var choice2 = $('#answer1'); var choice3 = $('#answer2'); var choice4 = $('#answer3'); question.text(allQuestions[0].question1); choice1.text(allQuestions[0].choices1[0]); choice2.text(allQuestions[0].choices1[1]); choice3.text(allQuestions[0].choices1[2]); choice4.text(allQuestions[0].choices1[3]); console.log('funcionando!'); var next = $('#next'); next.on('click', changeQuestion); function changeQuestion(){ var checked = $('#checkAnswer0'); if($checked.prop('checked')){ console.log('correcto')else{ console.log('no es correctp'); } } } } </code></pre> <p>i will appreciate your help if you help me with this! :)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload