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

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

References

<select>Usato per creare un menu a tendina.
<tfoot>Definisce il footer o sezione inferiore di una tabella.
<table>Tag primario per la creazione di tabelle
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
autofocusAttiva un elemento al caricamento della pagina.
<h1>Titolo di intestazione di primo livello

Users

Log in to search for users

Explore

Find inspiration

spiaggia portobotte

Genera Tavola Pitagorica (PHP)

Autoscuola Roma EUR Torrino Patent

Futura Design - Agenzia di Design

pagina di prova

informatica 21/10 ii

test js coinmarketcap

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