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

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

Referenze

<li>Inserisce voci all'interno di una lista
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<h4>Titolo di intestazione di quarto livello
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
<link>Collega il documento corrente con una risorsa esterna
formSpecifica a quale form appartiene un elemento.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Heads Or Tails Random Tally

esercitazione8.html

Livia e la foresta incantata

un casino pazzesco

ECOVACS GOAT A1600 LiDAR PRO

Home Page di Cristian Moraru\\

Scheda Tecnica Google Pixel 8 Pro

HTML con classi

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