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>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<div style="font-size:150%;font-weight:bold;text-align:center;margin-bottom: 0.5em">
  Moto circolare uniforme (MCU) e fasori
</div>
<div id="spiegazione">


  <ul>
    <li>Il MCU è il moto compiuto da un oggetto che si sposta lungo una traiettoria circolare con una velocità  \(\vec{v}\) che ha modulo \(v\) (e senso di rotazione) costante.</li>
    <li>Il MCU è caratterizzato da una serie di parametri: il raggio della circonferenza \(r\), il periodo di rotazione \(T\), la frequenza di rotazione \(f\), la velocità angolare \(\vec{\omega}\), la velocità tangenziale \(\vec{v}\) e l'accelerazione centripeta \(\vec{a}_{\rm c}\).</li>
    <li>il MCU può essere descritto attraverso una serie <b>fasori</b>, ovvero vettori che ruotano attorno al proprio punto di applicazione. </li>
<li>  Il <b>vettore posizione</b> \(\vec{r} = (x;y)\), ovvero il vettore che va dall'origine degli assi alla posizione dell'oggetto, è un esempio di <b>fasore</b>.</li>
<li>Altri esempi di <b>fasori</b> sono il vettore <b>velocità tangenziale</b> \(\vec{v} = (v_x;v_y)\) e il vettore <b>accelerazione centripeta</b> \( \vec{a}_{\rm c}= (a_{\rm c x};a_{\rm c y}) \). </li>
<li>Il moto di un <b>generico fasore</b> \(\vec u\) è facile da descrivere. Poiché il fasore ruota attorno al proprio punto di applicazione con velocità angolare costante \(\omega_u\), basta specificare la legge oraria dell'angolo:
<ul>
<li>
Se la rotazione è in <b>senso antiorario</b>
$$\theta_u = \theta_{u 0}+\omega_u t$$ 
</li>
<li>
Se la rotazione è in <b>senso orario</b>
$$\theta_u = \theta_{u 0}-\omega_u t$$ 
</li>

</ul>
 </li>
<li>Se la legge oraria dell'angolo di  \(\vec u\)  è nota, è facile specificare le leggi orarie che descrivono il moto della punta di  \(\vec u\), che ha coordinate...

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";
   ...