quiz7.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Quiz 7</title>
  5. <script src="quiz.js"></script>
  6. <link href="quiz.css" rel="Stylesheet">
  7.  
  8. let section = null;
  9. let article = null;
  10. let numPregunta = 0;
  11. let numRespuesta = 0;
  12.  
  13. function paginaCargada() {
  14. section = document.querySelector("#quiz");
  15. agregarTodasPreguntas();
  16. }
  17.  
  18. function agregarTodasPreguntas() {
  19. numPregunta = 1;
  20. for (const item of datos) {
  21. agregarArticulo(item);
  22. numPregunta++;
  23. }
  24. }
  25.  
  26. function agregarArticulo(item) {
  27. article = document.createElement('article');
  28. agregarPregunta(item.pregunta);
  29. agregarRespuestasPregunta(item.respuestas);
  30. section.appendChild(article);
  31. }
  32.  
  33. function agregarPregunta(pregunta) {
  34. const h2 = document.createElement('h2');
  35. h2.textContent = pregunta;
  36. article.appendChild(h2);
  37. }
  38.  
  39. function agregarRespuestasPregunta(respuestas) {
  40. numRespuesta = 1;
  41. for (const respuesta of respuestas) {
  42. agregarRespuesta(respuesta);
  43. numRespuesta++;
  44. }
  45. }
  46.  
  47. function agregarRespuesta(respuesta) {
  48. const p = document.createElement('p');
  49. const label = document.createElement('label');
  50. label.appendChild(crearInputRadio());
  51. label.appendChild(document.createTextNode(respuesta));
  52. p.appendChild(label);
  53. article.appendChild(p);
  54. }
  55.  
  56. function crearInputRadio() {
  57. const input = document.createElement('input');
  58. input.setAttribute('type', 'radio');
  59. input.setAttribute('name', 'pregunta'+numPregunta);
  60. input.setAttribute('value', numRespuesta);
  61. return input;
  62. }
  63.  
  64. //----------------------------------------
  65.  
  66. function calcularPuntuacion() {
  67. const output = document.querySelector('#resultado');
  68. const numPreguntas = datos.length;
  69. const numAciertos = contarAciertos();
  70. output.innerHTML = `Has acertado ${numAciertos} de ${numPreguntas}`;
  71. }
  72.  
  73. function contarAciertos() {
  74. const correctas = obtenerRespuestasCorrectas();
  75. const respondido = obtenerRespuestasUsuario();
  76. let numAciertos = 0;
  77. for (var i=0; i<correctas.length; i++) {
  78. if (correctas[i] == respondido[i]) numAciertos++;
  79. }
  80. return numAciertos;
  81. }
  82.  
  83. function obtenerRespuestasCorrectas() {
  84. const correctas = [];
  85. for (const item of datos) {
  86. correctas.push(item.correcta);
  87. }
  88. return correctas;
  89. }
  90.  
  91. function obtenerRespuestasUsuario() {
  92. const respondido = [];
  93. const articles = document.querySelectorAll('article');
  94. for (const article of articles) {
  95. const inputs = article.querySelectorAll('input');
  96. respondido.push(obtenerValorRadios(inputs));
  97. }
  98. return respondido;
  99. }
  100.  
  101. function obtenerValorRadios(inputs) {
  102. for (const input of inputs) {
  103. if (input.checked) {
  104. return parseInt(input.value);
  105. }
  106. }
  107. return 0;
  108. }
  109.  
  110.  
  111.  
  112. </script>
  113. </head>
  114. <body onload="paginaCargada()">
  115. <h1>Quiz 7</h1>
  116. <section id="quiz">
  117.  
  118. <div>
  119. <button onclick="calcularPuntuacion()">PuntuaciĆ³n</button>
  120. <output id="resultado"></output>
  121. </div>
  122. </body>
  123. </html>
  124.  

Proinf.net