0
hi im полностью noob в jquery im, пытающемся tokrt, поэтому я решил сделать динамическую викторину, чтобы улучшить свои навыки. Я делал это один шаг за раз, а затем попытался обернуть это все togheter. Я застрял в том, как проверить, что один из моих флажков проверен, чтобы сравнить, если он правильный ответ, а затем обновить вопрос и ответы. вот мой HTML:сравнение ответов в динамической викторине с jquery
<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='UTF-8'>
<title>Dynamic Quiz</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/prefixfree.js"></script>
<script type="text/javascript" src="js/codigo.js"></script>
</head>
<body>
<header>
<hgroup>
<h1>This is my Dynamic Quiz</h1>
<h2>Using html5/css/javascript</h2>
</hgruop>
</header>
<section id='description'>
<p>This quiz is compossed by 10 questions, you have to answer at least 7
from 10 to pass the exam.</p>
<h2>Lets start!</h2>
</section>
<div id='questions-number'>
<p>Question <span id='current-question'>1</span> of <span>10</span> </p>
</div>
<section id='questions'>
<p id='question'></p>
<ul>
<li><input type='checkbox' id='checkAnswer0'/><label id='answer0'>answer0</label></li>
<li><input type='checkbox' id='checkAnswer1'/><label id='answer1'>answer1</label></li>
<li><input type='checkbox' id='checkAnswer2'/><label id='answer2'>answer2</label></li>
<li><input type='checkbox' id='checkAnswer3'/><label id='answer3'>answer3</label></li>
</ul>
</section>
<div id='next'>
next
</div>
</body>
</html>
и это то, что я получил в JQuery до сих пор :)
$(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');
}
}
}
}
я ценю вашу помощь, если вы поможете мне с этим! :)
Почему бы вам не добавить атрибут значения к каждому из своих флажков и сравнить с ним - казалось бы, проще. Также казалось бы, что кнопки с радиоприемниками были бы более подходящими для этого, если бы это был множественный выбор? –