Classe III D e III E SIA: JavaScript quiz + tutorial

 js

Questo tutorial spiega come creare un programma di quiz in linguaggio JavaScript che assomiglierà a questo (puoi cambiare il tema grafico):
quiz
Il quiz apparirà così quando l'utente avrà terminato:
quiz_complete
Seguendo questo tutorial svilupperai le seguenti abilità di programmazione:
Si prega di seguire i passaggi seguenti. Puoi scaricare il codice completo in fondo a questa pagina, ma assicurati di leggere i passaggi in modo da sapere di cosa è responsabile ogni parte del codice.

Impostazione del codice HTML

Per iniziare, crea un nuovo file html es. quiz.html in un editor di testo di codifica. Devi aggiungere del codice HTML nella sezione body di un file html che creerà un'intestazione (in questo esempio è un'intestazione di dimensione h2) con un id di ' test_status ' e un div con un id di ' test '. L'intestazione test_status visualizzerà lo stato del quiz es. "Domanda 2 di 4" o "Test completato". Il div 'test' mostrerà le domande effettive e le possibili risposte nel quiz. Usa il codice qui sotto per iniziare.
  1. <html lang="en">
  2. <head>
  3. <meta charset="utf-8"/>
  4. <title>Quiz</title>

  5. </head>
  6. <body>
  7. <h2 id="test_status"></h2>
  8. <div id="test"></div>
  9. </body>

  10. </html>
Ora che hai un titolo aa div nel tuo codice HTML, puoi applicare uno stile aggiungendo il codice CSS . Nella sezione head del file HTML, sotto i tag title, aggiungi il seguente codice:
  1. <style>
  2. div#test{ border:#5AB029 3px solid; padding:10px 40px 40px 40px; background-color:#E5FCE3; width:50%;}
  3. </style>
Puoi cambiare il codice sopra sostituendo il bordo o i colori dello sfondo, lo spessore del bordo e il riempimento, o aggiungendo altre proprietà di stile.

Impostazione del codice JavaScript

All'interno della sezione principale del codice HTML sotto il tag </ style>, aggiungi il seguente codice:
  1. <script type="text/javascript">
  2. var pos = 0;
  3. var correct = 0;
  4. var test, test_status, question, choice, choices, chA, chB, chC;
  5. </script>
Il codice sopra creerà diverse variabili. In primo luogo, la variabile pos viene utilizzata per registrare qual è la posizione dell'utente nel test, ad es. domanda 3 su 4. La variabile corretta memorizza correttamente il numero di domande risposte. La variabile di test contiene il div 'test' e la variabile test_status viene utilizzata per contenere l'intestazione 'test_status' che mostra i progressi dell'utente nel test. La variabile domanda conterrà una domanda prelevata da una matrice , la variabile scelta conterrà la risposta selezionata dell'utente per una domanda, la variabile scelte conterrà le possibili risposte che verranno visualizzate all'utente e le variabili chA , chB e chC conterranno ogni risposta possibile (A, B o C) nel quiz a scelta multipla.

Aggiunta di domande, possibili risposte e chiave di risposta al quiz

Ora le domande devono essere create insieme alle loro possibili risposte e alla risposta corretta (tasto di risposta). In questo esempio, avremo quattro domande (puoi aggiungerne altre) con tre opzioni a scelta multipla per ogni domanda (A, B o C). Per fare questo, creiamo una matrice multidimensionale che contiene le domande, le opzioni per ogni domanda e la chiave di risposta per ogni domanda. Aggiungi il codice qui sotto e cambia le domande a tuo piacimento.
Questo codice va all'interno dei tag dello script sotto le variabili che hai creato nel passaggio precedente.
  1. var questions = [
  2. ["What is 36 + 42", "64", "78", "76", "B"],
  3. ["What is 7 x 4?", "21", "27", "28", "C"],
  4. ["What is 16 / 4?", "4", "6", "3", "A"],
  5. ["What is 8 x 12?", "88", "112", "96", "C"]
  6. ];

Crea la funzione get

Questo quiz necessita di ottenere elementi dalla pagina web (l'intestazione e il div) e quindi modificare questi elementi più volte. Piuttosto che digitare continuamente il documento. getElementById () ; metodo più e più volte, possiamo semplicemente trasformarlo in una funzione chiamata get . Aggiungi questo codice all'interno dei tag dello script dopo l'array creato nel passaggio precedente.
  1. function get(x){
  2. return document.getElementById(x);
  3. }

Crea la funzione renderQuestion

La funzione renderQuestion verrà utilizzata per ottenere il div di ' test ', controllare la posizione dell'utente nel quiz e, se non hanno ancora completato il quiz, verranno fornite domande diverse. La funzione mostrerà l'avanzamento dell'utente e la domanda e le opzioni effettive all'utente. L'utente deve scegliere una risposta selezionando un pulsante di opzione accanto a una risposta e quindi fare clic sul pulsante "Invia risposta".
Aggiungi questo codice all'interno dei tag dello script sotto la funzione get che hai creato nel passaggio precedente.
  1. function renderQuestion(){
  2. test = get("test");
  3. if(pos >= questions.length){
  4. test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
  5. get("test_status").innerHTML = "Test completed";
  6. // resets the variable to allow users to restart the test
  7. pos = 0;
  8. correct = 0;
  9. // stops rest of renderQuestion function running when test is completed
  10. return false;
  11. }
  12. get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
  13. question = questions[pos][0];
  14. chA = questions[pos][1];
  15. chB = questions[pos][2];
  16. chC = questions[pos][3];
  17. test.innerHTML = "<h3>"+question+"</h3>";
  18. // the += appends to the data we started on the line above
  19. test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
  20. test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
  21. test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
  22. test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
  23. }

Crea la funzione checkAnswer

La funzione checkAnswer è usata per, hai indovinato ... controlla la risposta. Mentre il quiz è incompleto, ogni scelta dell'utente verrà controllata e confrontata con la risposta corretta associata a ciascuna domanda (memorizzata nell'array delle domande ). Alla fine di questa domanda, verrà chiamata la renderQuestion.
Aggiungi il codice sottostante all'interno dei tag di script nella funzione renderQuestion creata nel passaggio precedente.
  1. function checkAnswer(){
  2. // use getElementsByName because we have an array which it will loop through
  3. choices = document.getElementsByName("choices");
  4. for(var i=0; i<choices.length; i++){
  5. if(choices[i].checked){
  6. choice = choices[i].value;
  7. }
  8. }
  9. // checks if answer matches the correct choice
  10. if(choice == questions[pos][4]){
  11. //each time there is a correct answer this value increases
  12. correct++;
  13. }
  14. // changes position of which character user is on
  15. pos++;
  16. // then the renderQuestion function runs again to go to next question
  17. renderQuestion();
  18. }

Fai eseguire il quiz

L'ultimo passaggio prevede l'aggiunta di una riga di codice che eseguirà la funzione renderQuestion non appena la pagina è stata caricata (utilizzando un listener di eventi che verifica un evento di caricamento ). Quando questa funzione viene caricata, le domande verranno presentate all'utente e il quiz inizierà.
Aggiungi il codice qui sotto all'interno dei tuoi tag di script nel tuo codice. Aggiungilo sotto la funzione checkAnswer che hai creato nel passaggio precedente. assicurati di aver terminato la sezione dello script chiudendola con il tag </ script>!
  1. window.addEventListener("load", renderQuestion, false);
E questo è tutto! Ora hai creato un gioco a quiz JavaScript. Sfida te stesso cercando di aggiungere le seguenti funzionalità al tuo quiz:
  • Aggiungi altre domande (facile!)
  • Cambia il tema del quiz (colori di sfondo / sfumatura, bordo, stile del carattere, ecc.)
  • Dì all'utente quali domande hanno risposto in modo errato
  • Mostra una barra di avanzamento visivo durante il test
  • Mostra il punteggio dell'utente come valore percentuale
  • Consenti all'utente di ripetere il quiz
  • Aggiungi più risposte possibili (ad esempio A, B, C, D)
  • Memorizza i risultati in un database usando PHP / MySQL (difficile)

Codice completo

Ecco il codice JavaScript completo per il programma di quiz:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>Quiz</title>

  6. <style>
  7. div#test{ border:#5AB029 3px solid; padding:10px 40px 40px 40px; background-color:#E5FCE3; width:50%;}
  8. </style>

  9. <script type="text/javascript">
  10. // pos is position of where the user in the test or which question they're up to
  11. var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
  12. // this is a multidimensional array with 4 inner array elements with 5 elements inside them
  13. // if you don't want answers viewable in the code, then you should use PHP and mySQL database
  14. var questions = [
  15. ["What is 36 + 42", "64", "78", "76", "B"],
  16. ["What is 7 x 4?", "21", "27", "28", "C"],
  17. ["What is 16 / 4?", "4", "6", "3", "A"],
  18. ["What is 8 x 12?", "88", "112", "96", "C"]
  19. ];
  20. // this get function is short for the getElementById function
  21. function get(x){
  22. return document.getElementById(x);
  23. }
  24. function renderQuestion(){
  25. test = get("test");
  26. if(pos >= questions.length){
  27. test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
  28. get("test_status").innerHTML = "Test completed";
  29. // resets the variable to allow users to restart the test
  30. pos = 0;
  31. correct = 0;
  32. // stops rest of renderQuestion function running when test is completed
  33. return false;
  34. }
  35. get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
  36. question = questions[pos][0];
  37. chA = questions[pos][1];
  38. chB = questions[pos][2];
  39. chC = questions[pos][3];
  40. test.innerHTML = "<h3>"+question+"</h3>";
  41. // the += appends to the data we started on the line above
  42. test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
  43. test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
  44. test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
  45. test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
  46. }
  47. function checkAnswer(){
  48. // use getElementsByName because we have an array which it will loop through
  49. choices = document.getElementsByName("choices");
  50. for(var i=0; i<choices.length; i++){
  51. if(choices[i].checked){
  52. choice = choices[i].value;
  53. }
  54. }
  55. // checks if answer matches the correct choice
  56. if(choice == questions[pos][4]){
  57. //each time there is a correct answer this value increases
  58. correct++;
  59. }
  60. // changes position of which character user is on
  61. pos++;
  62. // then the renderQuestion function runs again to go to next question
  63. renderQuestion();
  64. }
  65. window.addEventListener("load", renderQuestion, false);
  66. </script>
  67. </head>
  68. <body>
  69. <h2 id="test_status"></h2>
  70. <div id="test"></div>
  71. </body>

  72. </html>

Tutorial JavaScript (tradotto dal sito americano)



Benvenuto nella serie di tutorial di JavaScript. Qui troverai i tutorial che ti insegneranno le basi del linguaggio di programmazione JavaScript.

Imparerai come aggiungere codice JavaScript a un sito web e lavorare su diversi progetti tra cui una calcolatrice, un programma a quiz a scelta multipla e un gioco 2D.  

Questa serie di tutorial è un ottimo inizio per lo sviluppo web, la progettazione di giochi e la progettazione di app.

Quasi tutti i tutorial includono un video che mostra esattamente cosa fare insieme al codice di esempio in modo che tu possa provarlo tu stesso. Tutti i tutorial sono elencati in modo da poter iniziare con concetti di codifica di base e passare gradualmente a concetti intermedi e avanzati. Puoi iniziare dal primo tutorial o fare clic su qualsiasi tutorial se stai cercando qualcosa in particolare.
  1. Ciao mondo! (mostra un semplice messaggio nel browser )
  2. Variabili e tipi di dati
  3. operatori
  4. stringhe
  5. eventi
  6. funzioni
  7. Ambito variabile
  8. Array
  9. Trovare la lunghezza di matrici (e stringhe)
  10. Matrici multidimensionali
  11. Se affermazioni (se, altrimenti se, altro)
  12. Nested If dichiarazioni
  13. Utilizzo e / o operatori in una dichiarazione If complessa
  14. Cambia istruzioni
  15. Mentre i loop
  16. Do..while loop
  17. Per i loop
  18. Looping attraverso array (e stringhe)
  19. Oggetti, proprietà e metodi
  20. Utilizzando il metodo getElementById ()
  21. Cambiare un'immagine usando il metodo getElementById ()
  22. Scambiare immagini avanti e indietro usando JavaScript
  23. Scambiare le immagini usando un timer a intervalli
  24. Prendendo l'input dell'utente da un modulo
  25. Trattare il testo immesso da un modulo come un intero
  26. Invio di moduli
  27. Convalida dei dati del modulo
  28. Pulsanti radio e convalida modulo
  29. Caselle di controllo e convalida del modulo
  30. Caselle di avviso e caselle di conferma
  31. JavaScript richiede (caselle di input dell'utente)
  32. Eventi della tastiera in JavaScript
  33. Introduzione a JSON
  34. Creare un gioco 2D con JavaScript e canvas HTML5
  35. Fai un quiz a scelta multipla con JavaScript

Se hai completato le esercitazioni JavaScript e vuoi approfondire sul Javascript, puoi controllare la Canvas HTML5 ? Puoi utilizzare la Canvas HTML5 e JavaScript per disegnare forme, creare animazioni e sviluppare giochi!
 
Fai clic qui per provare le esercitazioni su Canvas HTML5.

Codice di esempio per progetti JS

Puoi anche accedere al codice per diversi progetti JS qui:
  1. Programma di calcolatrice JavaScript
  2. Programma di quiz JavaScript
 Link per scaricare un breve manuale in Javascript
 

Commenti

Post popolari in questo blog

Simulazioni di reti (con Cisco Packet Tracer)

Esercizi sulla rappresentazione della virgola mobile IEEE 754 (Floating Point)