Pruebas de Usabilidad v3

Escritorio-Virtual/crucigrama.html

@@ -265,6 +265,7 @@ <h4>Elige el nivel de dificultad:</h4>
 
             if (crucigrama) {
                 // Teclas aceptadas
+                // Usabilidad - Tecla de retroceso
                 if (teclasPermitidas.test(event.key) || event.keyCode == 8) {
 
                     if (!crucigrama.isACellClicked) {
@@ -299,6 +300,18 @@ <h4>Botonera:</h4> <!-- Pruebas de usabilidad.-->
         <button onclick="crucigrama ? crucigrama.introduceElement('/') : alert('Tienes que crear un juego!')">/</button>
     </section>
 
+    <!-- Usabilidad - Usuario quería feedback sonoro para saber las correctas o falsas. -->
+
+    <audio controls>
+        <source src="multimedia/correct.mp3" type="audio/mpeg">
+        <source src="multimedia/correct.wav" type="audio/wav">
+    </audio>
+
+    <audio controls>
+        <source src="multimedia/wrong.mp3" type="audio/mpeg">
+        <source src="multimedia/wrong.wav" type="audio/wav">
+    </audio>
+
 </body>
 
 

Escritorio-Virtual/estilo/crucigrama.css

@@ -33,6 +33,7 @@ main>p {
     font-size: 1.3em;
     padding: 0.5em 1em;
     border-color: black;
+    border-width: 0.08em;
 }
 
 /* Especificidad: 012 */
@@ -110,8 +111,9 @@ section[data-type="formulario"] {
     align-items: flex-start;
 }
 
-/* Especificidad: 011 */
-input[name="tiempoDB"] {
+/* Especificidad: 011-001 */
+input[name="tiempoDB"],
+audio {
     display: none;
 }
 

Escritorio-Virtual/js/crucigrama.js

@@ -286,15 +286,21 @@ class Crucigrama {
         if (expression_row && expression_col) {
             $(this.cellClicked).text(element); // Mostramos el valor introducido
             $(this.cellClicked).attr("data-state", "correct"); // Estado en correcto
+            $("audio")[0].play() // Usabilidad
+
+            // Usabilidad - Solo se deselecciona si la respuesta es correcta
+            // Se deselecciona la celda
+            this.isACellClicked = false;
+            this.cellClicked = null;
+
         } else {
             this.crucigrama[iOfCell][jOfCell] = 0;
-            $(this.cellClicked).removeAttr("data-state"); // deja de estar seleccionada
+            //$(this.cellClicked).removeAttr("data-state"); // deja de estar seleccionada
+            $("audio")[1].play() // Usabilidad
             alert("Elemento introducido no correcto");
         }
 
-        // Se deselecciona la celda
-        this.isACellClicked = false;
-        this.cellClicked = null;
+
 
         // Comprobamos el final del crucigrama
         if (this.check_win_condition()) {