velocità scrittura by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<pre>Indica una parte di testo preformattato
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
<strong>Definisce una parte del testo importante con formattazione in grassetto.
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<body>Tag primario di un documento HTML
forSpecifica a quale id è associato l'elemento in cui è dichiarato.

Users

Log in to search for users

Explore

Find inspiration

Elenchi puntati con HTML

JS Esercizio Concetti Gen es3

Borsino politico(2)

Form per il torneo misto disfo

esercizio HTML modalità interna

La ragazza con la valigia

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<div id="cfrase">
  <cite id="orgStr">you did it, and finally sell your first car on this year</cite>
</div>
<br>

<div class="wrArea">
  

<textarea id="writingArea" >
</textarea>
<div class="output">
  <p class="rigel tooltip">
    <span class="tooltiptext">Corrispondenza tra le due frasi</span>
    Corrispondenza (%): <b id="outputPerc">-</b>
  </p>
  <p class="rigel tooltip">
    <span class="tooltiptext">Numero di caratteri (n. caratteri della frase)</span>
    Conteggio caratteri: <b id="outputChar">-</b>
  </p>      
  <p class="rigel tooltip">
    <span class="tooltiptext">Numero di parole (n. parole della frase)</span>
    Conteggio parole: <b id="outputWords">-</b>
  </p>   
  <p class="rigel tooltip">
    <span class="tooltiptext">Punteggio generico in base alla corrispondenza e precisione nella scrittura, nonché per la velocità di scrittura</span>
    Precisione: <b id="outputPrec">-</b>
  </p>
  <p class="rigel tooltip">
    <span class="tooltiptext">Velocita di scrittura (parole al minuto)</span>
    Velocità di scrittura: <b id="outputSpeed">-</b>
  </p>   
  <p class="rigel tooltip">
    <span class="tooltiptext">Tempo impiegato nella scrittura della frase</span>
    Tempo: <b id="vis">-</b>
  </p>
</div>
</div>

textarea{
  flex:1 0 65%;
  height:400px;
}
.output{
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  width:100%;
}
.rigel{
  background:rgb(230,230,230);
  padding:5px 10px;
  border-radius:3px;
  flex:1;
  max-height:20px;
  
}
.wrArea{
  display:flex;
  flex-direction:row;
  grid-gap:4px;
  height:auto;
  max-height:400px;
}
#cFrase{
  width:100%;
  height:auto;
  text-align:center;
  padding:10px;
  background:rgb(240,240,240);
  border-radius:3px;
  font-size:13pt;
}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

var area = document.getElementById("writingArea");
var correction = 0;
const wpm = 60;
//cronometro

//rileva cancella
area.onkeyup = function() {
  var key = event.keyCode || event.charCode;

  if( key == 8 || key == 46 )
    correction --;
};

var ore = 0, minuti = 0, secondi = 0, decimi = 0;
var vis = "";
var stop = true;

function convTempo(m){
  var e = m < 0 ? "-" : "";
  var min = Math.floor(Math.abs(m));
  var sec = Math.floor((Math.abs(m) * 60) % 60);
  return e + (min < 10 ? "0" : "") + min + ":" + (sec < 10 ? "0" : "") + sec;
}

function avvia() {
  if(stop == true) {
    stop = false;
    cronometro();
  }
}

function cronometro() {
  if(stop == false) {
    decimi++;
    if(decimi > 9) {
      decimi = 0;
      secondi++;
    }
    if(secondi > 59) {
      secondi = 0;
      minuti++;
    }
    if(minuti > 59) {
      minuti = 0;
      ore++;
    }
    mostra();
    setTimeout("cronometro()", 100);
  }
}
function mostra() {
  if(ore < 10) vis = "0"; else vis = ore;
  if(minuti < 10) vis = vis + "0";
  vis = vis + minuti + ":";
  if(secondi < 10) vis = vis + "0";
  vis = vis + secondi + ":" + decimi;
  let mSpeed = word/wpm;
  document.getElementById("vis").innerHTML = vis + " ("+convTempo(mSpeed)+")";
}
function ferma() {
  stop = true;
  correction++;
}

var ltimer;

area.addEventListener("keyup", function(){
  controlloCorr();
  avvia();
  clearTimeout(ltimer);
  ltimer = setTimeout(ferma, 3000);
})

function controlloCorr(){
  var input1 = document.getElementById("orgStr").innerText;
  var input2 = document.getElementById("writingArea").value;


  word = input1.replace(/[&\/\\#,+()$~%.'":*?<>{}]/g,"");
  word = word.replace(/[\s,]+/g, " ");
  word = word.split(" ").filter(function(n) { return n != "" }).length;       
  word2 = input2.replace(/[&\/\\#,+()$~%.'":*?<>{}]/g,"");
  word2 = word2.replace(/[\s,]+/g, " ");
  word2 = word2.split(" ").filter(function(n) { return n != "" }).length;

  document.getElementById("outputPerc").innerHTML = corrispondenza(input1, input2);
  document.getElementById("outputChar").innerHTML = input2.length + " ("+input1.length+")";    
  document.getElementById("outputWords").innerHTML = word2 + " ("+word+")";

  var tSpeed = (60*word2)/secondi;
  var prec= 0, pCorr = 0, pChar= 0, pWords= 0, pSpeed= 0, pPrex = 0, corr;
  var pMax = 100;
  //chars
  if(input1.length == input2.length){
    pChar = 20
  }   else{
    pChar = 0
  }
  //words
  if(word == word2){
    pWords = 20
  }else{
    pWords = 0
  }
  //precisione e corrispondenze
  corr = document.getElementById("outputPerc").innerText;
  if (parseInt(corr) >= 75){
    pPrex = 20;
    pCorr =(parseInt(corr)/10)*2
    pPrex = pPrex - correction;
    document.getElementById('outputSpeed').innerHTML = tSpeed.toFixed(0) + " parole/min";
    if(tSpeed.toFixed(0) >= wpm){
      pSpeed= 20;
    }else if(tSpeed.toFixed(0) >= 50 && tSpeed.toFixed(0) < wpm){
      pSpeed= 15;
    }else {
      pSpeed= 10;
    }
  }

  prec = pCorr+ parseInt(pChar)+ parseInt(pWords)+ parseInt(pSpeed)+ parseInt(pPrex);
  document.getElementById("outputPrec").innerHTML = prec + "/100";

}


function corrispondenza(inp1, inp2) {
  var mag = inp1;
  var min = inp2;
  if (inp1.length < inp2.length) {
    mag = inp2;
    min = inp1;
  }
  var magLength = mag.length;
  if (magLength == 0) {
    return "inizia a scrivere";
  }
  var perc = ((magLength - differenza(mag, min)) / parseFloat(magLength))*100;
  return perc.toFixed(2) + "%";
}

function differenza(inp1, inp2) {
  // inp1 = inp1.toLowerCase();
  // inp2 = inp2.toLowerCase();

  var ccVal = new Array();
  for (var i = 0; i <= inp1.length; i++) {
    var ultimoValore = i;
    for (var j = 0; j <= inp2.length; j++) {
      if (i == 0)
        ccVal[j] = j;
      else {
        if (j > 0) {
          var nuovoValore = ccVal[j - 1];
          if (inp1.charAt(i - 1) != inp2.charAt(j - 1))
            nuovoValore = Math.min(Math.min(nuovoValore, ultimoValore),
                                   ccVal[j]) + 1;
          ccVal[j - 1] = ultimoValore;
          ultimoValore = nuovoValore;
        }
      }
    }
    if (i > 0)
      ccVal[inp2.length] = ultimoValore;
  }
  return ccVal[inp2.length];
}