JSFiddle - React, Tailwind, and code Playground

by Pierfrancesco Buonsante

HTML

<link rel="stylesheet" href="//jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<script src="//jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id = "splash" style="display:block;font-size:3vmin;text-align:justify">
<div style="font-weight:bold;font-size:120%;text-align:center">
Lati e angoli nei triangoli rettangoli
</div>
<div>
In molte applicazioni della fisica è necessario mettere in relazione i lati e gli angoli acuti di un triangolo rettangolo.
<br>
 Premendo il pulsante "gioca" potrai verificare le tue competenze in questo senso. 
 <br>
 Ti verrà mostrato un triangolo rettangolo in cui è evidenziato l'angolo retto (il vertice è un cerchietto) e uno degli angoli acuti (in verde).<br> Tu dovrai scegliere la relazione corretta tra le quattro proposte. <br>Ogni risposta corretta ti darà da 50 a 70 punti, in base al tempo che hai impiegato per rispondere. Ogni risposta errata ti toglierà 20 punti.
 <div style="margin:2vmin">
 <button type="button"  class="b1" onclick="prepara()">gioca</button>
 </div>
Premendo il pulsante "ripassa" potrai rivedere le definizioni e le principali proprietà delle funzioni goniometriche.
<div style="margin:2vmin">
  <button type="button"  class="b1" onclick="rip()">ripassa</button>
  </div>
</div>

</div>

<div id="ripassa" style="display:none;font-size:3vmin;text-align:justify;">
 <div style="margin:2vmin">
 <button type="button" class="b2" onclick="prepara()">gioca</button>  <button class="b2" type="button" onclick="splash()">ritorna</button>
 </div>
In molte applicazioni della fisica è necessario mettere in relazione i lati e gli angoli acuti di un triangolo rettangolo.<br>

 Questo può essere fatto attraverso le funzioni goniometriche seno (sin), coseno (cos) e tangente (tan), che sono definite come rapporti tra le lunghezze dei lati, come segue:
<ul>
  <li>
    <b>coseno</b>: è il <u>rapporto</u> tra la lunghezza del <u>cateto adiacente</u> all'angolo considerato e quella dell'<u>ipotenusa</u>;
  </li>
  <li>
  ...

CSS

div.risp {
  width: 55vmin;
  border: 3px solid #73AD21;
  font-size: 6vmin;
  padding: 0.2vmin;
  text-align: center;
  margin-top: 0.2vmin;
  margin-left: auto;
  margin-right: auto;
  border-radius: 2vh;
}

button.b1 {
  font-size: 100%;
  margin: 0 auto;
  padding: 0.8vmin;
  background-color: #cccc00;
  width: 20vmin;
  display: block;
  border-radius:2vmin;
}

button.b2 {
  font-size: 100%;
  padding: 0.8vmin;
  background-color: #cccc00;
  width: 20vmin;
  border-radius: 2vmin;
}

JavaScript

//var board1, A, B, C;
var seed = Math.floor(Math.random() * 10000) + 1;
var corretta;
var punteggio;
var turno, turni,ncor;
var startTime, endTime, Tmedio, totT;
var rispcev;



//============================================================================================
// preparazione 
function prepara(){

turni=10;
turno=0;
ncor=0;
 totT=0;
 punteggio=0;
 var j;
 rispcev= new Array(turni);
 for(j=0;j<turni;j++){
 rispcev[j]=0;
 }
document.getElementById("splash").style.display = "none";
document.getElementById("ripassa").style.display = "none";

document.getElementById("gameover").style.display = "none";

document.getElementById("gioco").style.display = "block";
gioca();


}

//============================================================================================
// gioco
function gioca(){

var rispce,j;
rispce='';
var ce = ['&#9723;','&#9724;']
for(j=0;j<turni;j++){
rispce +=ce[rispcev[j]];
}
document.getElementById("punti").innerHTML = "domanda "+(turno+1)+"/"+turni+"&nbsp;&nbsp;&nbsp;&nbsp;punti: "+punteggio;
document.getElementById("ce").innerHTML = rispce;
var v = creaTriangolo();
var r1 = domanda(v);
scriviRisposte(r1)
startTime = new Date();
}

//============================================================================================
// crea il triangolo rettangolo
// L'angolo retto è nel primo punto
function creaTriangolo() {

  var x0, x1, x2, y0, y1, y2, C1, C2, aC, aB, x, y, cc, ss, I,rp;

  // genera i cateti, tra 3 e 10
  C1 = Math.floor(8 * random()) + 3;
  C2 = Math.floor(8 * random()) + 3;
  // ruota il triangolo
  a = 2 * Math.PI * random();
  cc = Math.cos(a);
  ss = Math.sin(a);
  // angolo retto
  x0 = 0;
  y0 = 0;
  // vertice 1 (cateto C1)
  x1 = cc * C1;
  y1 = ss * C1;
  // vertice 2 (cateto C2)
  x2 = -ss * C2;
  y2 = cc * C2;
  // baricentro
  x = (x0 + x1 + x2) / 3;
  y = (y0 + y1 + y2) / 3;
  x0 -= x;
  x1 -= x;
  x2 -= x;
  y0 -= y;
  y1 -= y;
  y2 -= y;
  // bounding box
  I = Math.max(x0 * x0 + y0 * y0, x1 * x1 + y1 *...