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

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

Referenze

idIdentifica univocamente un elemento HTML
<a>Inserisce link e collegamenti ipertestuali
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
placeholderDefinisce un testo segnaposto per un elemento input o textarea
<map>Inserisce immagini mappa cliccabili in un documento
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Scheda Tecnica iPhone 15 Pro

Movimento libero JS

redirect 301 page2page

basicStructure 2

JS Esercizio Concetti Gen es2

tabella delle matricole

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<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];
}