Como hacer un Quiz Educativo con Google Apps Script

Google Apps Script Google Sheets Web Ejemplos

Como ya sabéis estoy haciendo un blog para aprender japonés y me he visto con la necesidad de desarrollar una herramienta para facilitar el aprendizaje del alfabeto Hiragana. A fin de conseguir un aprendizaje ameno y sencillo he creído que lo más idóneo era desarrollar un Quiz con Google Apps Script.

El sistema esta planteado de manera que podáis ir poniendo todas las respuestas que queráis en un spreadsheet y el quiz ( que no será más que una web) ira recogiendo esas preguntas y poniéndoselas al usuario de forma aleatoria. A la vez que se ha de poner la respuesta correcta, también se le tienen que poner las respuestas incorrectas y una url que dará la explicación de que es lo que hemos hecho mal.

Evidentemente, el código lo podréis personalizar como queráis, yo solo os doy un ejemplo de Google Apps Script que funciona. La aplicación final que vosotros hagáis solo se verá limitada por vuestras necesidades e imaginación.

Por motivos obvios, para hacer este artículo he usado el post que hacía referencia a números aleatorios en Google Apps Script

Sin más, os dejo con el código:

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
    var ok = 0;

    function Response(string)
    {
       SetAciertos();
       document.getElementById("container").innerHTML = string;
    }

    function SetAciertos()
    {
       if(ok)
       {
        document.getElementById("aciertos").innerHTML = "<p> Aciertos consecutivos: "+ ok + "</p>";
       }
       else
       {
         document.getElementById("aciertos").innerHTML = "<p></p>";
       }
    }
  
  
    function Start()
    {
       ok = 0;
       google.script.run.withSuccessHandler(Response).Question();
    }

    function Ok()
    {
       ok++;
       google.script.run.withSuccessHandler(Response).Question();
    }

    function Fail(link)
    {
      var html = "<h2> Test de Nivel de Hiragana </h2>";
      html += "<p><a href='" + link + "' target='_blank'> Haz click aquí para saber cual es tu fallo </a></p>"
      html += "<p><button onclick='Start()'> REINICIAR </button></p>";
      Response(html);
    }
    </script>

  </head>
  <body>
 <div id="aciertos"></div>
<div id="container">
    <h2> Test de Nivel de Hiragana </h2> 
    <p><button onclick="Start()"> INICIAR </button></p>
</div>

  </body>
</html>

Code.gs

function doGet()
{
    return HtmlService.createTemplateFromFile('index')
        .evaluate() // El evaluate siempre debe estar antes del FrameOptions
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function GetRandom(min,max)
{
  return Math.floor(Math.random()*(max -(min -1))) + min;
}

function crand(elements)
{
  return GetRandom(0,elements-1);
}

//Aleatorizamos un vector
function RandVector(Initial)
{
  var Vector = new Array();

  while(Initial.length)
  {
    var i = crand(Initial.length);
    Vector.push(Initial[i]);
    Initial.splice(i,1); 
  }
 
  return Vector;
}

function Question()
{
  //Obtenemos la lista de conversiones de texto
  var values = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getDataRange().getDisplayValues();

  var out = "<div>";

  var index = crand(values.length-1) + 1;

  var row = values[index];

  var vector = new Array();
  for(var i = 1 ; i < 5; i++)
    vector.push(row[i]);

  vector = RandVector(vector);
 
  out += "<table>";
  out += "<tr>";
  out += "<td></td>";
  out += "<td>";
  out += "<H1>" + row[0] + "</H1>";
  out += "</td>";
  out += "<td></td>";
  out += "<td></td>";
  out += "</tr>";
  out += "<tr>";
  for(var i = 0 ; i < vector.length ; ++i)
  {
    out += "<td>";
    if (vector[i] == row[1] )
    {
      out += "<p><button onclick='Ok()'> " + vector[i] + " </button></p>";
    }
    else
    {
      out += "<p><button onclick='Fail(\""+row[5]+"\")'> " + vector[i] + " </button></p>";
    }
    out += "</td>";
  }
  out += "</tr>";
  out += "</table>";

  out += "</div>";
  return out;
}

Si queréis ver funcionando este ejemplo podéis ver este código en un iframe dentro de este Juego para Aprender Hiragana

Tutoriales Google Apps Scripts

Como hacer un Quiz Educativo con Google Apps Script

No hay comentarios:

Publicar un comentario

Tal vez te interese