Aplicación de prueba de JavaScript simple con botones de radio -- javascript campo con jquery campo con css campo con html5 campo con twitter-bootstrap camp codereview Relacionados El problema

Simple JavaScript quiz application with radio buttons


2
vote

problema

Español

He creado una simple aplicación de JavaScript, que también es mi primer código en cualquier idioma en cualquier idioma de programación. Me tomó dos días para obtener el núcleo correcto y otros dos días para el estilo y la barra de progreso.

Añadiré características posteriores a este cuestionario, ya que continúo aprendiendo más y más sobre el idioma.

  var allQuestions = [{     question: "Before Mt. Everest was discovered, whaich mountain was considered to be the highest mountain in the world?",     choices: ["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],     correctAnswer: 1   },    {     question: "Does England have a 4th of July?",     choices: ["Yes", "No", "I don't know"],     correctAnswer: 0   },    {     question: "What is Rupert the bear's middle name?",     choices: ["Bear", "He doesn't have one!", "The", "Rupert"],     correctAnswer: 2   },    {     question: " What can you never eat for breakfast? ",     choices: ["Dinner", "Something sugary", "Lunch", "Supper"],     correctAnswer: 0   },    {     question: "If there are three apples and you took two away, how many do you have?",     choices: ["One", "Two", "None"],     correctAnswer: 1   },    {     question: "Spell 'Silk' out loud, 3 times in a row. What do cows drink?",     choices: ["Milk", "Water", "Juice", "Cows can't drink"],     correctAnswer: 1   },    {     question: "Which is heavier, 100 pounds of rocks or 100 pounds of gold? ",     choices: ["100 pounds of rocks", "100 pounds of rocks", "They weigh the same"],     correctAnswer: 2   },    {     question: "Can you spell 80 in two letters?",     choices: ["AI-TY", "It's not possible", "EIGH-TY", "A-T"],     correctAnswer: 3   },    {     question: "What question must always be answered ''Yes''?",     choices: ["What does Y-E-S spell?", "Will everyone die someday?", "Does everyone have a biological mother?", "Are you a human?"],     correctAnswer: 0   },    {     question: "How many sides does a circle have?",     choices: ["The back", "None. It's a circle", "Two", "Four"],     correctAnswer: 2   },    {     question: "What has a tail but no body?",     choices: ["A human", "A coin", "A cloud"],     correctAnswer: 1   },    {     question: "What word in the English language is always spelled incorrectly?",     choices: ["It's possible to spell anything right as long as you learn it", "Shakespeare", "Onomatopoeia", "Incorrectly"],     correctAnswer: 3   },    {     question: "When do you stop at green and go at red?",     choices: ["Watermelon!", "Traffic light!", "Garden"],     correctAnswer: 0   },    {     question: "What rotates but still remains in the same place?",     choices: ["Bottle (spin the bottle game)", "Clock", "Stairs"],     correctAnswer: 2   },    {     question: "How can you lift an elephant with one hand?",     choices: ["Truck", "Use both hands!", "Use a lever", "There is no such thing"],     correctAnswer: 3   } ]; var currentquestion = 0; var correctAnswers = 0;  function setupOptions() {   $('#question').html(parseInt(currentquestion) + 1 + ". " + allQuestions[currentquestion].question);   var options = allQuestions[currentquestion].choices;   var formHtml = '';   for (var i = 0; i < options.length; i++) {     formHtml += '<div><input type="radio" name="option" value="' + i + '" id="option' + i + '"><label for="option' + i + '">' +       allQuestions[currentquestion].choices[i] + '</label></div><br/>';   }   $('#form').html(formHtml);   $("#option0").prop('checked', true); };  function checkAns() {   if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {     correctAnswers++;   }; };  $(document).ready(function() {    $(".jumbotron").hide();   $('#start').click(function() {     $(".jumbotron").fadeIn();     $(this).hide();   });    $(function() {     $("#progressbar").progressbar({       max: allQuestions.length - 1,       value: 0     });   });    setupOptions();    $("#next").click(function() {     event.preventDefault();     checkAns();     currentquestion++;     $(function() {       $("#progressbar").progressbar({         value: currentquestion       });     });     if (currentquestion < allQuestions.length) {       setupOptions();       if (currentquestion == allQuestions.length - 1) {         $('#next').html("Submit");         $('#next').click(function() {           $(".jumbotron").hide();           $("#result").html("You correctly answered " + correctAnswers + " out of " + currentquestion + " questions! ").hide();           $("#result").fadeIn(1500);         });        };      };   }); });  
  html, body, div, span, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {     margin:0;     padding:0;     border:0;     outline:0;     font-size:100%;     vertical-align:baseline;     background:transparent; }  body {     line-height:1; }  article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {      display:block; }  nav ul {     list-style:none; }  blockquote, q {     quotes:none; }  blockquote:before, blockquote:after, q:before, q:after {     content:'';     content:none; } /*end of default style resetting*/  h1 {   font-size: 20vw;   font-family: 'Chonburi', cursive; }  .ui-widget-header {     background-image: none !important;     background-color: #2ECC71 !important;  }  label{   display: inline; }    h3, #next {   text-align: center;   display: inline-block;   border-radius: 10%; }  #result {   font-family: 'Press Start 2P', cursive !important;   font-weight: bold;   font-size: 1.5em;   color: #036; }  input[name="option"] {   float:left;    }  #form div{   margin:auto;   max-width: 205px; }  #progressbar {   margin: auto;   margin-top: 20px;   float: none;    width: 50%;  }  #container {   text-align: center; }  input, select {     vertical-align:middle; }  .button {     display: inline-block;     padding: 1em;     background-color: #79BD9A;     text-decoration: none !important;      color: white !important; }  body{   text-align: center; }  .progress-bar {   float: left;   width: 0;   /*height: 100%;*/   font-size: 12px;   line-height: 20px;   color: #fff;   text-align: center;   background-color: #337ab7;   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);           box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);   -webkit-transition: width .6s ease;        -o-transition: width .6s ease;           transition: width .6s ease; }1  
  <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> <h1>Quiz</h1> <br/> <br/> <a href="#" id="start" class="btn btn-primary btn-lg">Let's Begin</a> <br/> <div class="well jumbotron">   <h3 id="question"></h3>   <br/><br/>   <form id="form">    </form>   <br/>   <a href="#" id="next" class="button">Next</a><br/>   <div id="progressbar" class="progress-bar progress-bar-striped"></div> </div> <div id="result"></div>  

Para tener una mejor apariencia del producto final: codepen .

Me gustaría conocer sus puntos de vista en mi código, y las formas en que pueda mejorarlo.

Original en ingles

I've created a simple JavaScript application, which also happens to be my first-ever piece of code in any programming language.It took me two days to get the core correct and another two days for styling and the progress bar.

I'll be adding subsequent features to this quiz, as I continue to learn more and more about the language.

var allQuestions = [{     question: "Before Mt. Everest was discovered, whaich mountain was considered to be the highest mountain in the world?",     choices: ["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],     correctAnswer: 1   },    {     question: "Does England have a 4th of July?",     choices: ["Yes", "No", "I don't know"],     correctAnswer: 0   },    {     question: "What is Rupert the bear's middle name?",     choices: ["Bear", "He doesn't have one!", "The", "Rupert"],     correctAnswer: 2   },    {     question: " What can you never eat for breakfast? ",     choices: ["Dinner", "Something sugary", "Lunch", "Supper"],     correctAnswer: 0   },    {     question: "If there are three apples and you took two away, how many do you have?",     choices: ["One", "Two", "None"],     correctAnswer: 1   },    {     question: "Spell 'Silk' out loud, 3 times in a row. What do cows drink?",     choices: ["Milk", "Water", "Juice", "Cows can't drink"],     correctAnswer: 1   },    {     question: "Which is heavier, 100 pounds of rocks or 100 pounds of gold? ",     choices: ["100 pounds of rocks", "100 pounds of rocks", "They weigh the same"],     correctAnswer: 2   },    {     question: "Can you spell 80 in two letters?",     choices: ["AI-TY", "It's not possible", "EIGH-TY", "A-T"],     correctAnswer: 3   },    {     question: "What question must always be answered ''Yes''?",     choices: ["What does Y-E-S spell?", "Will everyone die someday?", "Does everyone have a biological mother?", "Are you a human?"],     correctAnswer: 0   },    {     question: "How many sides does a circle have?",     choices: ["The back", "None. It's a circle", "Two", "Four"],     correctAnswer: 2   },    {     question: "What has a tail but no body?",     choices: ["A human", "A coin", "A cloud"],     correctAnswer: 1   },    {     question: "What word in the English language is always spelled incorrectly?",     choices: ["It's possible to spell anything right as long as you learn it", "Shakespeare", "Onomatopoeia", "Incorrectly"],     correctAnswer: 3   },    {     question: "When do you stop at green and go at red?",     choices: ["Watermelon!", "Traffic light!", "Garden"],     correctAnswer: 0   },    {     question: "What rotates but still remains in the same place?",     choices: ["Bottle (spin the bottle game)", "Clock", "Stairs"],     correctAnswer: 2   },    {     question: "How can you lift an elephant with one hand?",     choices: ["Truck", "Use both hands!", "Use a lever", "There is no such thing"],     correctAnswer: 3   } ]; var currentquestion = 0; var correctAnswers = 0;  function setupOptions() {   $('#question').html(parseInt(currentquestion) + 1 + ". " + allQuestions[currentquestion].question);   var options = allQuestions[currentquestion].choices;   var formHtml = '';   for (var i = 0; i < options.length; i++) {     formHtml += '<div><input type="radio" name="option" value="' + i + '" id="option' + i + '"><label for="option' + i + '">' +       allQuestions[currentquestion].choices[i] + '</label></div><br/>';   }   $('#form').html(formHtml);   $("#option0").prop('checked', true); };  function checkAns() {   if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {     correctAnswers++;   }; };  $(document).ready(function() {    $(".jumbotron").hide();   $('#start').click(function() {     $(".jumbotron").fadeIn();     $(this).hide();   });    $(function() {     $("#progressbar").progressbar({       max: allQuestions.length - 1,       value: 0     });   });    setupOptions();    $("#next").click(function() {     event.preventDefault();     checkAns();     currentquestion++;     $(function() {       $("#progressbar").progressbar({         value: currentquestion       });     });     if (currentquestion < allQuestions.length) {       setupOptions();       if (currentquestion == allQuestions.length - 1) {         $('#next').html("Submit");         $('#next').click(function() {           $(".jumbotron").hide();           $("#result").html("You correctly answered " + correctAnswers + " out of " + currentquestion + " questions! ").hide();           $("#result").fadeIn(1500);         });        };      };   }); });
html, body, div, span, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {     margin:0;     padding:0;     border:0;     outline:0;     font-size:100%;     vertical-align:baseline;     background:transparent; }  body {     line-height:1; }  article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {      display:block; }  nav ul {     list-style:none; }  blockquote, q {     quotes:none; }  blockquote:before, blockquote:after, q:before, q:after {     content:'';     content:none; } /*end of default style resetting*/  h1 {   font-size: 20vw;   font-family: 'Chonburi', cursive; }  .ui-widget-header {     background-image: none !important;     background-color: #2ECC71 !important;  }  label{   display: inline; }    h3, #next {   text-align: center;   display: inline-block;   border-radius: 10%; }  #result {   font-family: 'Press Start 2P', cursive !important;   font-weight: bold;   font-size: 1.5em;   color: #036; }  input[name="option"] {   float:left;    }  #form div{   margin:auto;   max-width: 205px; }  #progressbar {   margin: auto;   margin-top: 20px;   float: none;    width: 50%;  }  #container {   text-align: center; }  input, select {     vertical-align:middle; }  .button {     display: inline-block;     padding: 1em;     background-color: #79BD9A;     text-decoration: none !important;      color: white !important; }  body{   text-align: center; }  .progress-bar {   float: left;   width: 0;   /*height: 100%;*/   font-size: 12px;   line-height: 20px;   color: #fff;   text-align: center;   background-color: #337ab7;   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);           box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);   -webkit-transition: width .6s ease;        -o-transition: width .6s ease;           transition: width .6s ease; }
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> <h1>Quiz</h1> <br/> <br/> <a href="#" id="start" class="btn btn-primary btn-lg">Let's Begin</a> <br/> <div class="well jumbotron">   <h3 id="question"></h3>   <br/><br/>   <form id="form">    </form>   <br/>   <a href="#" id="next" class="button">Next</a><br/>   <div id="progressbar" class="progress-bar progress-bar-striped"></div> </div> <div id="result"></div>

To have a better a look at the final product checkout: Codepen.

I would like to know your views on my code, and ways in which I can make it better.

              
     
     

Lista de respuestas

2
 
vote
vote
La mejor respuesta
 

Objeto a clase

Cada objeto dentro de su allQuestions ARRAY Sigue exactamente el mismo "Formato":

  {     question:      choices:      correctAnswer:  }   

Para hacer esto más sencillo, podemos extraer una "clase" de esto, para que podamos almacenar más fácilmente las preguntas. Eso podría parecer esto:

  function QuizQuesiton(question, choices, correctAnswer) {     this.question = question;     this.choices = choices;     this.correctAnswer = correctAnswer; }   

Ahora, al crear una pregunta, podemos simplemente crear una instancia de esta clase como esta:

  new QuizQuestion("question", ["choices", "choices"], #);   

Luego, si desea crear una matriz de estos, puede hacer esto:

  [     new QuizQuestion("question", ["choices", "choices"], #),     new QuizQuestion("question", ["choices", "choices"], #),     new QuizQuestion("question", ["choices", "choices"], #),     ... ];   

Simplificación con variables

Hay algunos lugares donde podía simplificar y acelerar su código si usó variables para acceder a datos repetidos.

Por ejemplo, en:

  $(document).ready(function() {   

podrías almacenar

  • $(".jumbotron");
  • $("#next");
  • $("#result");8

Entonces, no tendrías que acceder a la DOM tanto.

también, aquí:

  allQuestions[currentquestion].choices[i] + '</label></div><br/>';   

¿Por qué no usar ese { question: choices: correctAnswer: } 0 variable que gasta tanto tiempo creando?


Muestre su identificación, clase , quiero decir

Compruebe aquí:

  {     question:      choices:      correctAnswer:  } 1  

Este no es el punto de IDS. Las ID en HTML están destinadas a elementos específicos, únicos y especiales. Si tiene que crear un montón de elementos que todos tengan la misma ID y para eludirlo, simplemente está pegando un número hasta el final de la identificación, está haciendo algo mal.

Aquí, debe estar usando un { question: choices: correctAnswer: } 2 . Luego, puede obtener todos los elementos con esta clase usando

  {     question:      choices:      correctAnswer:  } 3  

Luego, puede usar un índice para destinar elementos específicos con esta clase.

 

Object to class

Each object inside your allQuestions array follows the exact same "format":

{     question:      choices:      correctAnswer:  } 

To make this simpler, we can extract a "class" from this so we can more easily store the questions. That might look like this:

function QuizQuesiton(question, choices, correctAnswer) {     this.question = question;     this.choices = choices;     this.correctAnswer = correctAnswer; } 

Now, when creating a question, we can simply instantiate this class like this:

new QuizQuestion("question", ["choices", "choices"], #); 

Then, if you want to create an array of these, you can do this:

[     new QuizQuestion("question", ["choices", "choices"], #),     new QuizQuestion("question", ["choices", "choices"], #),     new QuizQuestion("question", ["choices", "choices"], #),     ... ]; 

Simplification with variables

There are quite a few places where you could both simplify and speed up your code if you used variables to access repeated data.

For example, in:

$(document).ready(function() { 

you could store

  • $(".jumbotron");
  • $("#next");
  • $("#result");

Then, you wouldn't have to access the DOM as much.

Also, here:

allQuestions[currentquestion].choices[i] + '</label></div><br/>'; 

Why not use that choices variable that you spent so much time creating?


Please show your ID - er, class, I mean

Check here:

...'" id="option' + i + '">... 

This is not the point of IDs. IDs in HTML are meant for specific, unique, and special elements. If you have to create a bunch of elements that should all have the same ID and to circumvent it you are just sticking a number to the end of the ID, the you're doing something wrong.

Here, you should instead be using a class "options". Then, you can get all the elements with this class using

$(".options"); 

Then, you can use an index to target specific elements with this class.

 
 
         
         

Relacionados problema

3  Diseño de contenedor CSS Bootstrap CSS  ( Bootstrap css container layout ) 
Siempre me han usado para escribir mi propio CSS, pero decidí dar una oportunidad a Twitter-Bootstrap y quiero asegurarme de que no estoy usando más contene...

5  Limpieza de un comedor ... Sitio web  ( Cleaning up a dining hall website ) 
Estoy haciendo un sitio web que toma un montón de información de comedor y lo pone en forma de unirse en un formulario más amable (y con suerte más fácilmente...

5  COMENTARIO DE BOOTSTRAP POST POST HTML  ( Bootstrap comment post html markup ) 
Estoy creando estilos para las publicaciones de comentarios para obtener proyectos usando Bootstrap. Me pregunto si esto es una buena marca HTML y la extensió...

7  Manera correcta de extender Bootstrap Modal - Bloqueo, desbloqueo  ( Correct way to extend bootstrap modal lock unlock ) 
Estoy tratando de extender la ventana modal de Bootstrap 3 con la capacidad de deshabilitarlo. He construido este código: main.cpp7 Demo de trabajo ...

3  Diseño de contenedor CSS Bootstrap CSS  ( Bootstrap css container layout ) 
Siempre me han usado para escribir mi propio CSS, pero decidí dar una oportunidad a Twitter-Bootstrap y quiero asegurarme de que no estoy usando más contene...

1  Almacenar JWT en el lado del cliente y poner tokens en toda la solicitud futura  ( Storing jwt in client side and putting tokens in all the future request ) 
He comenzado a usar Nodejs con express JS y Passportjs y JWT para la autenticación del usuario. Soy capaz de autenticar al usuario y generar token JWT. Estoy ...

4  Diseño de formulario de registro de usuario  ( User registration form layout ) 
Estoy trabajando en un sitio donde necesito poder acomodar a los viajeros frecuentes, pero no soy tan bueno en el diseño de la interfaz de usuario cuando me d...

3  Twitter Bootstrap colapsando solo "Vista telefónica" Menú de NavBar en Click  ( Twitter bootstrap collapsing only phone view navbar menu on click ) 
Esta es una pregunta difícil para mí preguntar, porque realmente no sé cómo explicarlo. Entonces, por favor, soporta conmigo. Menú de bootstrap, como lo sé,...

1  Plugin simple del panel de bootstrap  ( Simple bootstrap panel plugin ) 
En este momento estoy estudiando OOP con JavaScript / Jquery y hasta ahora, al leer tutoriales a través de Internet y con la mano de ayuda de Google, creo que...

-2  Proyecto de entrevista para rediseñar un sitio web para una propiedad  ( Interview project to redesign a website for a property ) 
Estoy solicitando una posición de UI / UX en una empresa que hace software para los propietarios, apartamentos, gerentes de propiedades, etc. Después de la en...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos