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

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

References

requiredRende obbligatorio un campo di input
<option>Serve ad inserire una voce in un menu di selezione.
<h5>Titolo di intestazione di quinto livello
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio

Users

Log in to search for users

Explore

Find inspiration

Campagna in primavera

tabella venuta male

Costruzione di tabella con html5

inserimento immagini in un testo

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