0
Récemment, j'ai posté sur la façon de mettre en œuvre une variable en innerHTML à utiliser dans un jeu-questionnaire en ligne. Le résultat a été que la variable a été accidentellement déclarée comme une chaîne dans mon code. Je me suis débarrassé des guillemets et la page Web a fonctionné encore. Après avoir ajouté des phrases différentes par la suite comme "Votre score était de 11/11. Vous avez réussi le test avec toutes les notes, ne soyez pas trop excité, ce n'est que la partie facile." Pour chaque section du quiz, j'ai assigné une variable de score différente pour chaque section afin que l'utilisateur puisse voir à quel point ils se sont bien comportés après le test. Par exemple, la section facile a obtenu sa propre variable de score, qui a été créée en réglant cette variable sur le score actuel à ce moment précis du quiz. Voilà ce que je suis resté avec:innerHTML Non Affichage
function eqs() {
var escore = score;
if (escore < 4) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. If you're reading this message, you got below 4 marks. Considering that this the easy section, you should've got a much higher score.";}
if (escore > 4 && < 7) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You didn't get a bad score, but neither did you get a good score. If you were guessing, consider yourself lucky.";}
if (escore > 7 && < 10) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You got a fairly decent score. Typically, you should get 11, but you're not far off.";}
if (escore == 11) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. Nice job! You aced this section with full marks! Don't get too excited though, this is only the easy section.";}
}
Rien montré, donc j'ai décidé d'ajouter une alerte qui affiche un écran pop-up à chaque fois que la fonction a été exécutée en me disant la valeur de mon score. Je l'ai re-testé mais encore une fois, rien ne s'est montré. Cette fois-ci, j'ai scanné le fichier pour m'assurer que je ne manquais pas d'erreurs idiotes. Où vais-je mal? (Il serait ironique si je l'ai écrit tout cela pour une erreur stupide que je réussi à ne pas regarder ...)
Code entier (Juste au cas où vous en avez besoin):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
background-color: red;
color: white;
font-family: 'Open Sans', Arial;
margin: auto;
margin-top: 20px;
max-width: 1160px;
}
.jumbotron {background-color: #ff4d4d;}
.btn {width: 100%;}
</style>
<script>
\t $(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();});
var score = 0;
var seconds = 0;
function add1() {score += 1};
function add2() {score += 2};
function add3() {score += 3};
function eqs() {
var escore = score;
alert(" + escore + ");
if (escore < 4) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. If you're reading this message, you got below 4 marks. Considering that this the easy section, you should've got a much higher score.";}
if (escore > 4 && < 7) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You didn't get a bad score, but neither did you get a good score. If you were guessing, consider yourself lucky.";}
if (escore > 7 && < 10) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You got a fairly decent score. Typically, you should get 11, but you're not far off.";}
if (escore == 11) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. Nice job! You aced this section with full marks! Don't get too excited though, this is only the easy section.";}
}
</script>
<title>Year 7 English Quiz - Are you smarter than an 11 year old?</title>
</head>
<body>
<div class="container">
\t <h1>Year 7 English Quiz - Are you smarter than an 11 year old?</h1><hr>
\t <h3>Rules: (Read before playing)</h3>
\t <p>'-' Means fill in the blank with a word</p>
\t <p>'|' Means fill in the blank with a phrase</p>
\t <p>'+' Means complete the word</p>
\t <p>There are 33 questions in this quiz.</p>
\t <p>By hitting the timer to the bottom, you can challenge yourself and see how quick you could complete the quiz.</p>
\t <p>11 will be a set of easy questions, another 11 will be a set of medium questions and the last 11 will be hard/or virtually impossible for a Year 7 to figure out.</p>
<p>These difficulty levels only apply to Year 7s. A hard question could be simple to you.</p>
\t <p>Have fun and don't get mad if you don't pass the test. If you fail, then that doesn't necessarily bad at English!</p>
\t <p>Don't click a button two times during a quiz unless you want to mess everything up. But I know you're probably a rebel.</p>
\t <p>Scroll down after each question, as some may not show on your screen and will be below</p>
\t <p>At the end, your points will be tallied up. Through hard, you will receive negative points for answering a question incorrectly.</p>
\t <button class="btn btn-default" onclick="stopwatch">Stopwatch</button>
\t <span data-toggle="collapse" data-target="#q1" id="disableoc"><button type="button" class="btn btn-default"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Chill Out M8">Just get to the questions already!</a></button></span><hr>
\t <div id="q1" class="collapse">
\t \t <h1>Easy Questions:</h1><br>
\t \t <div class="jumbotron"><h1 class="question">Question 1: When is _ birthday?</h1></div>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q2">Answer 1: Your</button>
\t \t <button onclick="minus1()" class="btn btn-danger" data-toggle="collapse" data-target="#q2">Answer 2: You're</button><hr>
\t </div>
\t <div id="q2" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 2: +ranky</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q3">Answer 1: Kranky</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q3">Answer 2: Cranky</button><hr>
\t </div>
\t <div id="q3" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 3: Spot the word class that doesn't exist.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 1: Determiner</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 2: Verb</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 3: Noun</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 4: Preposition</button>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 5: Proverb</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 6: Adjective</button><hr>
\t </div>
\t <div id="q4" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 4: It's - cats and dogs.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q5">Answer 1: Pouring</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q5">Answer 2: Raining</button><hr>
\t </div>
\t <div id="q5" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 5: +yclone</h1></div>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q6">Answer 1: Cyclone</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q6">Answer 2: Syclone</button><hr>
\t </div>
\t <div id="q6" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 6: I - cheeseburger.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 1: Haz</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 2: Have</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 3: Has a</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 4: Have a</button><hr>
\t </div>
\t <div id="q7" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 7: Find the tense of the following sentence: I located my nearest barber.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 1: Present</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 2: Simple</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 3: Continuous</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 4: Past</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 5: Future</button><hr>
\t </div>
\t <div id="q8" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 8: - the remote control.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 1: Gimme</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 2: Give me</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 3: Gave me</button><hr>
\t </div>
\t <div id="q9" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 9: What is the closest definition to a synonym?</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q10">Answer 1: A word used to describe a verb</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q10">Answer 2: A group of words that acts in the same way as a participle</button><br>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 3: A word that is similar if not identical to another word</button><hr>
\t </div>
\t <div id="q10" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 10: What is the closest definition to a noun phrase?</h1></div>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 1: Answer 2 but the noun *must* be either a subject or object</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 2: A phrase with 1 or more noun(s) in it</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 3: A noun that also acts a phrase</button><hr>
\t </div>
\t <div id="q11" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 11: The he was entirely - in frozen carbonite.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 1: Encasted</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 2: Encapsulated</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 3: Capsulated</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 4: Capered</button><hr>
\t </div>
\t <div id="eqsummary" class="collapse">
\t <div class="jumbotron"><p id="sum1"></p></div>
\t </div>
\t </div>
</body>
</html>
Comme je l'ai continué à lire tous vos commentaires, aucun d'entre eux semblait fonctionner trop bien ... Ou rien montré ou il ne montrait une fois. Pour cette raison, j'ai décidé de me débarrasser de la fonction de score et de dire à l'utilisateur quel score cumulatif ils avaient dans chaque section. Je l'ai testé à nouveau et il a montré 0/0 mais quand j'ai rechargé la page, j'ai fini le quiz et j'ai toujours 0/0. Des idées sur la façon de résoudre ce problème? –