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 style="font-size:150%;font-weight:bold;text-align:center;margin-bottom: 0.5em">
  Angolo standard per un vettore in due dimensioni
</div>
<div id="spiegazione">
  In un sistema di riferimento cartesiano bidimensionale la direzione e il verso di un vettore sono individuati tramite l'angolo standard.<br/> Tale angolo ha le seguenti caratteristiche
  <ul>
    <li>il vertice dell'angolo è nel punto di applicazione del vettore. Per comodità assumiamo che il vettore sia applicato nell'origine del sistema di riferimento cartesiano</li>
    <li>il primo lato dell'angolo coincide con il semiasse positivo delle ascisse;</li>
    <li>il secondo lato dell'angolo coincide con la semiretta individuata dal vettore;</li>
  </ul>
  In realtà, esistono due angoli con le caratteristiche sopra descritte Le ampiezze di tali angoli danno come somma l'angolo giro. Gli angoli sono equivalenti, ma sono distinti dal segno, che viene assegnato in base al senso della rotazione che porta l'asse
  delle ascisse sul vettore.
  <ul>
    <li>
      segno positivo per una rotazione antioraria;
    </li>
    <li>
      segno negativo per una rotazione oraria.
    </li>
  </ul>
  Attraverso i seguenti passi è possibile determinare l'angolo a partire dalle componenti cartesiane del vettore
  <ul>
    <li>
      individuare un <b>triangolo rettangolo</b> che come ipotenusa ha il modulo del vettore e come <b>cateti</b> ha i <b>valori assoluti delle componenti cartesiane</b> del vettore (si ricordi infatti che le componenti cartesiane possono essere sia positive
      che negative);
    </li>
    <li>
      ricavare l'<b>angolo adiacente al cateto sulle ascisse</b>, utilizzando la funzione <b>tangente inversa</b>. Tale angolo è sempre acuto;
    </li>
    <li>
      ricavare l'<b>angolo standard</b> dall'angolo acuto trovato al passo precedente.
...

CSS

body{
  font-size: 120%;
}
button{
  font-size: 100%;
  margin: 0.25em;
  background-color: #cccc00;
  width: 210px;
}

JavaScript

// --------------------------------------------------------------
// mostra la traccia e nasconde la spiegazione
function mostraTraccia() {
  // nasconde la spiegazione e il bottone che mostra la traccia
  document.getElementById("spiegazione").style.display = "none";
  document.getElementById("Besercizio").style.display = "none";


  // rende visibile la traccia  
  document.getElementById("traccia").style.display = "block";
  generaTraccia();
}


// --------------------------------------------------------------
// mostra la soluzione
function mostraSoluzione() {
  // nasconde la spiegazione e il bottone che mostra la traccia
  document.getElementById("soluzione").style.display = "block";
}
// --------------------------------------------------------------
// mostra la discussione
function mostraDiscussione() {
  // nasconde la spiegazione e il bottone che mostra la traccia
  document.getElementById("discussione").style.display = "block";
  document.getElementById("grafici").style.display = "block";
}



// --------------------------------------------------------------
// nasconde la traccia e visualizza l'introduzione
function intro() {
  // nasconde la spiegazione e il bottone che mostra la traccia
  document.getElementById("spiegazione").style.display = "block";
  document.getElementById("Besercizio").style.display = "block";


  // rende visibile la traccia  
  document.getElementById("traccia").style.display = "none";
  generaTraccia();
}


//========================================================================
// questa funzione recupera i dati
function recupera_dati() {
// controllo se nel campo c'è un numero (richiesta di un problema specifico)
  var pnum = document.getElementById("num").value;
  if (pnum == "") {

 document.getElementById("num").style.borderColor = "#ff0000";
      document.getElementById("num").style.borderWidth = "1px";

} else {
    seed = parseInt(pnum);       
     document.getElementById("num").style.borderColor = "#bbbbbb";
   ...