[Hackathon24] Translation: SQL workshop in Spanish (#488)

* Initial spanish folfer for SQL

* Add spanish translation activities 7 to 12 and index

* Translate Syntax explained page

* spanish translation activities 1-6 sql

* translation of JS files and nitpick on markup

* Removing youtube tutorials

* bring back english metadata tags

* Removing youtube tag from activities 1 to 6

* Addressig missing translation in markup files activities 1 to 6

* Translating text inside JS files act 1 to 6

* Remove english from activity 2

* nitpicks on js files and removing youtube

* Doing final sweep through JS files and translating elements

* Translating answer key and minor updates to metadata of two activities

---------

Co-authored-by: agarayy <[email protected]>

content/espanol/sql_workshop/_index.md

@@ -0,0 +1,29 @@
+---
+title: "SQL: Salvando la Galaxia"
+description: "Aprendiendo comandos básicos de SQL"
+date: 2019-07-25T13:24:17-07:00
+prereq: "Ninguno"
+difficulty: "Principiante"
+draft: false
+icon: "fas fa-database"
+weight: 130
+---
+
+# Introducción: Aprende SQL salvando la Galaxia!
+
+![Galaxy](media/Galaxy.png)
+
+## Bienvenido a la Estación Espacial de Nuevo! 
+
+Eres un aventurero espacial que viaja a través de la galaxia en tu cohete mientras resuelves acertijos de código para ayudar a salvar a tus amigos aliens en distintos planetas.
+
+¡Haz sido elegido como un explorador espacial honorario por la Federación Galáctica! Se te darán misiones para ayudar hacer la galaxia un lugar seguro y divertido para todos.
+
+
+{{% notice warning %}}
+Por favor, no uses el navegador Firefox para este taller.
+{{% /notice%}}
+
+## Contenido
+
+{{% children /%}}

content/espanol/sql_workshop/activity1/_activity1.css

@@ -0,0 +1,8 @@
+/* Reference position for blocks */
+.terminal_div {
+  padding-top: 150px;
+  padding-left: 100px;
+  padding-bottom: 0px;
+  padding-right: 20px;
+  background-image: url('../media/Terminal_old.png');
+}

content/espanol/sql_workshop/activity1/_activity1.js

@@ -0,0 +1,30 @@
+function check()
+{
+    // Highlight the correct answers in green and disable drag
+    change_color('div6', p1, "answer1");
+    change_color('div7', p2, "answer2");
+    change_color('div8', p3, "answer3");
+    change_color('div9', p4, "answer4");
+    change_color('div10', p5, "answer5");
+
+    // Check if all the answers are correct
+    if(p1 == "answer1" && p2 == "answer2" && p3 == "answer3" &&
+       p4 == "answer4" && p5 == "answer5")
+    {
+        document.getElementById("sqlcommand").style.visibility = 'hidden';
+        displaytable("galaxy", "table");
+
+        // Display the checkmark
+        var checkmark = document.getElementById("resume_plot");
+        checkmark.setAttribute("style","visibility:visible");
+
+        // Change terminal screen to display "Command Accepted" image
+        var screen = document.getElementById("terminal_div");
+        screen.style.backgroundImage = "url('../media/Accept.png')";
+
+        hide_boxes();
+    } else {
+    // If incorrect, give alert
+      alert("Inténtalo de nuevo, Cadete Espacial.");
+    }
+}

content/espanol/sql_workshop/activity1/_index.md

@@ -0,0 +1,100 @@
+---
+title: "Actividad 1: Aprende el comando SELECT"
+description: "Aprende el comando SELECT"
+date: 2020-07-17
+prereq: "Ninguno"
+difficulty: "Pricipiante"
+draft: false
+---
+<!-- Links for javascript and CSS needed for drop down logic -->
+<link rel="stylesheet" href="../default/_default.css" type="text/css"></link>
+<link rel="stylesheet" href="../default/_type.css" type="text/css"></link>
+<link rel="stylesheet" href="_activity1.css" type="text/css"></link>
+
+<script type="text/javascript" src="../default/alasql.js"></script>
+<script type="text/javascript" src="../default/db.js"></script>
+<script type="text/javascript" src="../default/_default.js"></script>
+<script type="text/javascript" src="../default/_type.js"></script>
+<script type="text/javascript" src="_activity1.js"></script>
+
+
+# Misión 1: ¡Salvar al Planeta de la Diversión del Aburrimiento! 
+¡Tu primera misión es ir al Planeta de la Diversión y salvarlo del aburrimiento! Te han enviado una base de datos sobre el planeta y necesitas aprender como usar los comandos SQL para ayudar a salvar el Planeta de la Diversión. 
+
+## Tarea 1: Echa un vistazo a la información sobre el Planeta de la Diversión
+Te han dado información sobre la Galaxia y quieres buscar al Planeta de la Diversión. Para hacer esto, la Federación Galáctica te ha dado tu primer comando SQL:`SELECT`. 
+
+{{% notice info %}}
+### Lo que hace el comando:  
+El comando `SELECT` te permite elegir cuáles datos mostrar de la base de datos. 
+{{% /notice%}}
+
+### Ejemplo:
+
+![Select](assets/Select.PNG)
+
+### ¡Ahora usa lo que aprendiste! 
+{{% notice tip %}}
+**¡Arrastra los bloques a la terminal y reacomodalos para responder la siguiente pregunta!**
+{{% /notice%}}
+
+#### Pregunta: ¿Cuál comando muestra todas las columnas en la base datos llamadas "galaxy"?
+
+{{< rawhtml >}}
+<div class="content_scaler">
+<div class="terminal_div" id="terminal_div">
+
+<!-- Rectangles to Receive blocks -->
+<div id="div6" class="dropClass" ondrop="drop(event)" ondragover="allowDrop(event)";> </div>
+<div id="div7" class="dropClass" ondrop="drop(event)" ondragover="allowDrop(event)";> </div>
+<div id="div8" class="dropClass" ondrop="drop(event)" ondragover="allowDrop(event)";> </div>
+<div id="div9" class="dropClass" ondrop="drop(event)" ondragover="allowDrop(event)";> </div>
+<div id="div10" class="dropClass" ondrop="drop(event)" ondragover="allowDrop(event)";> </div>
+
+<div style="clear: both;"></div> 
+
+<br>
+
+<div id="div1" class ="codeBlocks" ondrop="drop(event)" ondragover="allowDrop(event)">
+ <img class="img" id="answer1" src="assets/Select_Block.PNG" draggable="true" ondragstart="drag(event)" id="drag1" align: top left> <!-- style="border: 1px solid green;"> -->
+</div>
+
+<div id="div2" class="codeBlocks" ondrop="drop(event)" ondragover="allowDrop(event)">
+  <img class="img" img id="answer2" src="assets/Asterix_Block.PNG" draggable="true" ondragstart="drag(event)" id="drag2">
+</div>
+
+<div id="div3" class="codeBlocks" ondrop="drop(event)" ondragover="allowDrop(event)">
+  <img class="img" img id="answer4" src="assets/galaxy_block.png" draggable="true" ondragstart="drag(event)" id="drag3">
+</div>
+
+<div id="div4" class="codeBlocks" ondrop="drop(event)" ondragover="allowDrop(event)">
+  <img class="img" img id="answer3" src="assets/From_Block.PNG" draggable="true" ondragstart="drag(event)" id="drag4">
+</div>
+
+<div id="div5" class="codeBlocks" ondrop="drop(event)" ondragover="allowDrop(event)">
+  <img class="img" img id="answer5" src="assets/Semicolon_Block.PNG" draggable="true" ondragstart="drag(event)" id="drag5">
+</div>
+
+<div style="clear: both;"></div> 
+
+<!-- Enter button -->
+<button class="button button1" onclick="check()">Enter</button>
+</div> <!-- terminal_div -->
+</div> <!-- content_scaler -->
+
+<!-- Hidden SQL database will appear once correct sequence is placed -->
+<div style="clear: both;"></div> 
+<h1 class="error" id="sqlcommand" style="visibility:hidden"><strong>ERROR ENTRADA INVÁLIDA</strong></h1>
+<table id="table">
+  <tr></tr>
+</table>
+
+<!-- Tells User to continue mission -->
+<div class="resume_plot" id="resume_plot" style="visibility:hidden">
+  <p> ¡Encontraste el comando correcto para mostrar la base de datos completa! Esto es es útil cuando quieres ver toda la información al alcance de tus dedos.</p>
+  <div class="alert">
+    <span id="check">&#10003;</span>
+    Haz completado la tarea. Continua a la siguiente misión.
+  </div>
+</div>
+{{< /rawhtml >}}

content/espanol/sql_workshop/activity10/_activity10.js

@@ -0,0 +1,49 @@
+function sql() 
+{
+  clearTable();
+  document.getElementById("sqlcommand").innerHTML = "ERROR ENTRADA INVÁLIDA";
+  document.getElementById("sqlcommand").style.visibility="visible";
+
+  var user = document.getElementById("commands").innerHTML;
+  debug(user.toLowerCase(),"select sum(population) from planet;");
+  var array = alasql("MATRIX OF " + user);
+  var ans = JSON.stringify(alasql(user));
+
+  document.getElementById("sqlcommand").style.visibility = 'hidden';
+
+  ans = ans.substring(ans.indexOf("{") + 1, ans.indexOf("}"));
+
+  var ansArr = ans.split(',');
+  var headArr = [];
+  var i;
+  for( i = 0; i < ansArr.length; i++)
+  {
+    headArr.push(ansArr[i].substring( ansArr[i].indexOf('"') + 1, ansArr[i].indexOf('":')));
+  }
+
+  sqlToTable(headArr, array, "table");
+
+  /*change answer here */
+  var ans1 = "select sum(population) from planet;";
+
+  //Change string to lower case
+  var input = user.toLowerCase();
+
+  if(input == ans1)
+  {
+    green(input);
+    document.getElementById("story").innerHTML = "Ahora que sabemos cuántos invitados van a asistir, hay que elegir qué comida llevar a la fiesta."; 
+
+    /* Changes terminal screen */
+    var screen = document.getElementById("terminal_div");
+    screen.style.backgroundImage = "url('../media/green.png')"
+
+    /* Display the checkmark */
+    var checkmark = document.getElementById("resume_plot");
+    checkmark.setAttribute("style","visibility:visible");
+  }
+  else
+  {
+    document.getElementById("story").innerHTML = "El comando no es correcto. ¡Sigue intentando!";
+  }
+}

content/espanol/sql_workshop/activity10/_index.md

@@ -0,0 +1,84 @@
+---
+title: "Actividad 10: Aprende el comando SUM"
+description: "Aprende el comando SUM"
+date: 2020-07-07
+prereq: "Comando SELECT, comando WHERE"
+difficulty: "Principiante"
+draft: false
+---
+<!-- Links for javascript and CSS needed for drop down logic -->
+<link rel="stylesheet" href="../default/_default.css" type="text/css"></link>
+<link rel="stylesheet" href="../default/_type.css" type="text/css"></link>
+<script type="text/javascript" src="../default/_default.js"></script>
+<script type="text/javascript" src="../default/_type.js"></script>
+<script type="text/javascript" src="../default/alasql.js"></script>
+<script type="text/javascript" src="../default/db.js"></script>
+<link rel="stylesheet" href="_activity10.css" type="text/css"></link>
+<script type="text/javascript" src="_activity10.js"></script>
+
+
+## Regresa los Tótems Legendarios del planeta de la Diversión al Lider
+
+Haz encontrado exitosamente los dos Tótems Legendarios del planeta de la Diversión. El Líder te agradece por encontrar su tesoro perdido.
+
+### El Líder revela un secreto:
+{{% notice info %}}
+Los Tótems Legendarios del planeta de la Diversión no pueden liberar todo su potencial hasta que sean unidos juntos. Unicamente pueden ser unidos por el "Inventor".
+
+Tu siguiente paso es encontrar a la persona que pueda combinar ambos Tótems Legendarios del planeta de la Diversión. El "Inventor" solo va a aparecer si organizas una gran fiesta.
+
+{{% /notice%}}
+
+## Tarea 10: Ayuda a los habitantes a organizar la fiesta.
+¡El planeta entero está invitado! Ayuda a los ciudadanos a prepararse para la fiesta averiguando cuántos invitados irán a la fiesta.
+
+Aprendamos el comando `SUM`
+
+![Explain](assets/sum.png)
+
+#### Usando la base de datos  'planet'(planeta) y el comando `SUM()`, encuentra el numero total de invitados que van a asistir a esta increíble fiesta.
+
+{{% notice tip %}}
+Usa el comando de la actividad 1 para mostrar toda la base de datos.
+
+* Pista 1: El comando es muy similar al ejemplo de arriba y el ejemplo del ejercicio de `AVG()` (tarea anterior).
+* Pista 2: La columna 'population'(población) contiene información sobre el número de individuos por ciudad.
+{{% /notice%}}
+
+<!-- SQL Type In Activity -->
+
+{{< rawhtml >}}
+<div class="content_scaler">
+  <div class="terminal_div" id="terminal_div">
+    <div class = "outer">
+      <h3 id = "commands" contenteditable="true" onclick="placeholder()">Escribe el comando aquí</h3>
+    </div>
+    <div class = "prev">
+      <h3 id = "prev"></h3>
+    </div>
+    <div style="clear: both;"></div>
+    <button class="button button1" onclick="sql()"> Enter </button>
+    <div style="clear: both;"></div> 
+    <button class = "button reset" onclick="reset()">Reiniciar</button>
+  </div> <!-- terminal_div -->
+</div> <!-- content_scaler -->
+
+<div style="clear: both;"></div> 
+
+<h1 class="error" id="sqlcommand" style="visibility:hidden"><strong>ERROR ENTRADA INVÁLIDA</strong></h1>
+
+<table id="table">
+  <tr></tr>
+</table>
+
+<h4 id="story"></h4>
+
+<!-- Tells User to continue mission -->
+<div class="resume_plot" id="resume_plot" style="visibility:show">
+  <div class="alert">
+    <span id="check">&#10003;</span>
+    Completaste la tarea. Continúa con la siguiente misión.
+  </div>
+</div>
+
+{{< /rawhtml >}}