Greetings everyone, I apologize for my poor English. I've been searching through numerous documents, but due to my language barrier, I am having trouble understanding them. I have designed a quiz page, but I'm facing an issue where I can't display the results at the end of the page.
Here's what I want:
- If the user selects the true section, they should receive a success message. If they select the false section, they should receive an error message (I've achieved this).
- The page needs to show how many correct answers were selected (I'm struggling with the algorithm for this).
I've made attempts, but unfortunately, there are several mistakes in my code. Can anyone assist me in determining how many questions have been correctly answered?
This is my HTML Code:
<html>
<head>
<link href="css/boostrap.css" rel="stylesheet" media="screen">
<link href="css/deneme.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<script type="text/JavaScript" src="scripts/jquery.alerts.js"></script>
<script type="text/JavaScript" src="scripts/jquery-1.8.2.js"></script>
<script type="text/JavaScript" src="scripts/jquery.js"></script>
<script type="text/JavaScript" >
// if they click false section it gives error message
$(".alerts").on('click', function() {
var did = $(this).attr('data-id');
$(document).trigger("set-alert-id-" + did, [
{
'message': "Wrong",
'priority': 'warning'
}]);
});
// if they click true section it gives success message
$(".alerts-success").on('click', function() {
var did = $(this).attr('data-id');
$(document).trigger("set-alert-id-" + did, [
{
'message': "Success",
'priority': 'warning'
}]);
});
// I try something to show how many question is true selected but I can not do this
function askQuestion(question) {
var answer = prompt(question[0], '');
if (answer == question[1]) {
alert('Correct!');
score++;
} else {
alert('Sorry. The correct answer is ' + question[1]);
}
}
var message = 'You got ' + score;
message += ' out of ' + questions.length;
message += ' questions correct.';
document.write('<p>' + message + '</p>');
</script>
</head>
...
CSS CODE:
.quiz_container {
list-style-type: none !important;
font-weight: bold;
color: #21252E;
width: 98%;
}
/*fluid grid layout using twitter bootstrap */
.row-fluid {
margin-left: 0 !important;
}
...
@media (max-width: 480px) {
.quiz_container li {
font-size: 1em !important;
}
.quiz_container .question_container h1 {
font-family: verdana, sans-serif;
font-size: 1.25em;
}
.quiz_container .question img, .revealed_answer img {
display: none;
}
.quiz_container .question_container {
margin: 1em 0em 3.5em;
}
}