Classe III D e III E SIA: JavaScript quiz + tutorial
Questo tutorial spiega come creare un programma di quiz in linguaggio JavaScript che assomiglierà a questo (puoi cambiare il tema grafico):
Il quiz apparirà così quando l'utente avrà terminato:
Seguendo questo tutorial svilupperai le seguenti abilità di programmazione:
- Creazione e utilizzo di array multidimensionali
- Creare e usare le funzioni
- Uso degli eventi (ad esempio carico evento)
- Aggiunta di input dell'utente come i pulsanti di opzione
- Usando i cicli per ripetere il codice
- Usare le istruzioni if per verificare le condizioni
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.- <html lang="en">
- <head>
- <meta charset="utf-8"/>
- <title>Quiz</title>
- </head>
- <body>
- <h2 id="test_status"></h2>
- <div id="test"></div>
- </body>
- </html>
- <style>
- div#test{ border:#5AB029 3px solid; padding:10px 40px 40px 40px; background-color:#E5FCE3; width:50%;}
- </style>
Impostazione del codice JavaScript
All'interno della sezione principale del codice HTML sotto il tag </ style>, aggiungi il seguente codice:- <script type="text/javascript">
- var pos = 0;
- var correct = 0;
- var test, test_status, question, choice, choices, chA, chB, chC;
- </script>
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.
- var questions = [
- ["What is 36 + 42", "64", "78", "76", "B"],
- ["What is 7 x 4?", "21", "27", "28", "C"],
- ["What is 16 / 4?", "4", "6", "3", "A"],
- ["What is 8 x 12?", "88", "112", "96", "C"]
- ];
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.- function get(x){
- return document.getElementById(x);
- }
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.
- function renderQuestion(){
- test = get("test");
- if(pos >= questions.length){
- test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
- get("test_status").innerHTML = "Test completed";
- // resets the variable to allow users to restart the test
- pos = 0;
- correct = 0;
- // stops rest of renderQuestion function running when test is completed
- return false;
- }
- get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
- question = questions[pos][0];
- chA = questions[pos][1];
- chB = questions[pos][2];
- chC = questions[pos][3];
- test.innerHTML = "<h3>"+question+"</h3>";
- // the += appends to the data we started on the line above
- test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
- test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
- test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
- test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
- }
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.
- function checkAnswer(){
- // use getElementsByName because we have an array which it will loop through
- choices = document.getElementsByName("choices");
- for(var i=0; i<choices.length; i++){
- if(choices[i].checked){
- choice = choices[i].value;
- }
- }
- // checks if answer matches the correct choice
- if(choice == questions[pos][4]){
- //each time there is a correct answer this value increases
- correct++;
- }
- // changes position of which character user is on
- pos++;
- // then the renderQuestion function runs again to go to next question
- renderQuestion();
- }
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>!
- window.addEventListener("load", renderQuestion, false);
- 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:- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8"/>
- <title>Quiz</title>
- <style>
- div#test{ border:#5AB029 3px solid; padding:10px 40px 40px 40px; background-color:#E5FCE3; width:50%;}
- </style>
- <script type="text/javascript">
- // pos is position of where the user in the test or which question they're up to
- var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
- // this is a multidimensional array with 4 inner array elements with 5 elements inside them
- // if you don't want answers viewable in the code, then you should use PHP and mySQL database
- var questions = [
- ["What is 36 + 42", "64", "78", "76", "B"],
- ["What is 7 x 4?", "21", "27", "28", "C"],
- ["What is 16 / 4?", "4", "6", "3", "A"],
- ["What is 8 x 12?", "88", "112", "96", "C"]
- ];
- // this get function is short for the getElementById function
- function get(x){
- return document.getElementById(x);
- }
- function renderQuestion(){
- test = get("test");
- if(pos >= questions.length){
- test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
- get("test_status").innerHTML = "Test completed";
- // resets the variable to allow users to restart the test
- pos = 0;
- correct = 0;
- // stops rest of renderQuestion function running when test is completed
- return false;
- }
- get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
- question = questions[pos][0];
- chA = questions[pos][1];
- chB = questions[pos][2];
- chC = questions[pos][3];
- test.innerHTML = "<h3>"+question+"</h3>";
- // the += appends to the data we started on the line above
- test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
- test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
- test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
- test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
- }
- function checkAnswer(){
- // use getElementsByName because we have an array which it will loop through
- choices = document.getElementsByName("choices");
- for(var i=0; i<choices.length; i++){
- if(choices[i].checked){
- choice = choices[i].value;
- }
- }
- // checks if answer matches the correct choice
- if(choice == questions[pos][4]){
- //each time there is a correct answer this value increases
- correct++;
- }
- // changes position of which character user is on
- pos++;
- // then the renderQuestion function runs again to go to next question
- renderQuestion();
- }
- window.addEventListener("load", renderQuestion, false);
- </script>
- </head>
- <body>
- <h2 id="test_status"></h2>
- <div id="test"></div>
- </body>
- </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.
- Ciao mondo! (mostra un semplice messaggio nel browser )
- Variabili e tipi di dati
- operatori
- stringhe
- eventi
- funzioni
- Ambito variabile
- Array
- Trovare la lunghezza di matrici (e stringhe)
- Matrici multidimensionali
- Se affermazioni (se, altrimenti se, altro)
- Nested If dichiarazioni
- Utilizzo e / o operatori in una dichiarazione If complessa
- Cambia istruzioni
- Mentre i loop
- Do..while loop
- Per i loop
- Looping attraverso array (e stringhe)
- Oggetti, proprietà e metodi
- Utilizzando il metodo getElementById ()
- Cambiare un'immagine usando il metodo getElementById ()
- Scambiare immagini avanti e indietro usando JavaScript
- Scambiare le immagini usando un timer a intervalli
- Prendendo l'input dell'utente da un modulo
- Trattare il testo immesso da un modulo come un intero
- Invio di moduli
- Convalida dei dati del modulo
- Pulsanti radio e convalida modulo
- Caselle di controllo e convalida del modulo
- Caselle di avviso e caselle di conferma
- JavaScript richiede (caselle di input dell'utente)
- Eventi della tastiera in JavaScript
- Introduzione a JSON
- Creare un gioco 2D con JavaScript e canvas HTML5
- 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:Link per scaricare un breve manuale in Javascript
Commenti
Posta un commento