<script>  
// Скрипт для предварительной оценки потраченного времени на текст.  
// Автор: CbIPoK2513  
// 13.11.2018 (c) pandora.clan.su  
// v1.0 (13.11.2018)  
// P.s. оставь этот текст, оно тебе ничего не стоит, зато другие смогу со мной связаться для уточнение\получение этого скрипта :)  
var trLocalStorage = localStorage.getItem('TestReading'); // Получаем данные из localStorage  
if(trLocalStorage=='hidden') // Если hidden, то..  
$('#testReading, #testReading_value').remove(); // Удаляем блоки связанные со скриптом  
else if(trLocalStorage) // Если не hidden, то..  
TestReadingStart(true,trLocalStorage); // Проверяем, есть ли тут инфа. Если да - то запускаем скрипт со статусом "true"..  
else if(!trLocalStorage) // Если нет..  
TestReadingStart(false); // То "false"  

function TestReadingStart(status,time) { // Основная часть скрипта..  
$('#testReading, #testReading_value').hide(); // Прячем изначально, потом определим выводить или нет  
if(status==true) { // Если статус "true", т.е. есть данные о кол-во слов в минуту, то..  
var trText = NumberOfWords($('#testReadText')), // Получаем кол-во слов в тексте  
trUserRes = Math.round(trText / time); // Делим кол-во слов в тексте, на данные по кол-ву слов в минуту  
$('#testReading_value').text('Прочитаете примерно за '+(trUserRes === 0 ? 'меньше минуты' : +trUserRes+' '+declOfNum(trUserRes,['минуту','минуты','минут']))).show();  
// ↑↑↑ Выводим сообщение о том, сколько потребуется времени на прочтение статьи, ну и показываем блок  
} else if(status==false) { // Если статус "false", т.е. данных о кол-во слов в минуту нет, то..  
$('#testReading').show(); // Показываем "popup" с тестом  
var trTextLenght = NumberOfWords($('#trTextLenght')), // Заранее получаем кол-во слов в тестовом тексте  
trSec = 0; // Заранее создаём переменную для "секундомера"  
$('.tr-modal_button').on('click', function(){ // Обработчик кнопок в тесте  
var trModalStep = $(this).closest('.tr-step'), // Возвращает родительский блок .tr-step. Работает только если нажата кнопка step.  
trHasButton = $(this).attr('name'); // Получаем имя нажатой кнопки  
if(trHasButton=='step') var trThisStep = $(this).data('step'); // Если кнопка step, то получаем её текущий "шаг".  

if(trHasButton=='step' && (trThisStep==1 || trThisStep==2 || trThisStep==3 || trThisStep==4)) { // Для первых трёх "шагов" используем следующее..  
// Первый "шаг" не обрабатываем, т.к. там нету особых действий  
if(trThisStep==2) var trSecTimer = setInterval(function() {trSec++}, 1000);  
// ↑↑↑ Для второго "шага" запускаем "секундомер" для подсчёта кол-ва слов (кнопка "Продолжить")  
if(trThisStep==3){ // В третьем "шаге".. (кнопка "Прочитал")  
clearInterval(trSecTimer); // Останавливаем секундомер  
$('#trResLen').text(trTextLenght+' '+declOfNum(trTextLenght,['слово','слова','слов'])); // Выводим юзеру кол-во слов в тестовом тексте, так для прикола, пусть знает :)  
$('#trResSec').text(trSec+' '+declOfNum(trSec,['секунда','секунды','секунд'])); // Выводим юзеру кол-во секунд, затраченых на прочтение тестового текста  
trRes = Math.round((trTextLenght * 60) / trSec); // Из данных выше считаем, сколько !примерно! слов слов прочитает юзер за минуту  
$('#trRes').text(trRes+' '+declOfNum(trRes,['слово','слова','слов'])+' в минуту'); // Показываем кол-во слов в минуту, из данных выше. Так же для прикола  
console.info(trRes);  
}  
if(trThisStep==4) { // В четвёртом шаге.. (кнопка "Сохранить")  
localStorage.setItem('TestReading', trRes); // Сохраняем в localStorage кол-во слов в минуту  
TestReadingStart(true,trRes); // Перезапускаем функцию со статусом "true" (Сейчас статус "false")  
}  
if(trThisStep!=4) trModalStep.removeClass('tr--active').next().addClass('tr--active'); // Для всех "шагов", кроме четвёртого  
// ↑↑↑ Отвечает за переключение к следующему "шагу"  
} else if(trHasButton=='hidden') { // Если нажата кнопка hidden (Она в виде текста, в четвёртом шаге)  
localStorage.setItem('TestReading', 'hidden'); // Сохраняем в localStorage значение hidden, оно потом будет "отрубать" скрипт.  
} else if(trHasButton=='close' || trHasButton=='hidden') { // Если нажата кнопка close или hidden  
$('#testReading, #testReading_value').hide(); // Просто прячем блоки  
} trResizeModal();  
}); trResizeModal();  
}  

function trResizeModal() { // Используется для "popup" окон, чтобы те изменялись по высоте (фикс для margin: auto;)  
var trModalStepHeight = $('.tr-modal .tr-step.tr--active').height();  
$('.tr-modal').height(trModalStepHeight+50);  
}  

function NumberOfWords(elem) { // Используется для подсчёта кол-ва слов в тексте  
return elem.text().replace(/\n/g,'').replace(/—/g,' ').split(' ').filter(function(e){return e === 0 || e}).length;  
}  

function declOfNum(number,titles){ // Используется для склонение по падежам. Годный вариант, советую себе где-то сохранить.. (P.s. автора неизвестен, так шо сорян, но ему благодарочка)  
cases = [2,0,1,1,1,2];  
return titles[(number%100>4 && number%100<20)? 2 : cases[(number%10<5)?number%10:5]];  
}  
</script>

#testReading, #testReading_value {display: none;}  
.tr-modal {display: block; width: 350px; background: #e1e3e7; border-radius: 5px; border: 1px solid #4b8cdc; overflow: hidden;}  
.tr-modal .tr-step {max-height: 80vh; overflow: hidden auto;}  
.tr-modal .tr-step:not(.tr--active) {display: none;}  
.tr-modal .tr-title {font-weight: bold; padding: 10px; margin-bottom: 10px; background: #4b8cdc; color: #fff;}  
.tr-modal .tr-content {font-size: 90%; padding: 10px; margin-bottom: 10px; color: #333;}  
.tr-modal .tr-button {text-align: center; padding-bottom: 10px;}  
.tr-modal .tr-modal_button {display: inline-block; padding: 7px 12px; border: 0; border-radius: 3px; outline: none; cursor: pointer;}  
.tr-modal .tr-modal_button[name="step"] {background: #4b8cdc; color: #fff;}  
.tr-modal .tr-modal_button[name="close"] {background: #c7cbd4; color: #666;}  
.tr-modal .tr-modal_button[name="hidden"] {padding: 0; display: inline; font-size: inherit; color: inherit; text-decoration: underline;}  
.tr-modal .tr-info {display: block; padding: 5px; font-size: 80%; color: #777;}  
.tr-modal .tr-info span {text-decoration: underline; cursor: pointer;}  
.tr-modal {position: fixed; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}  
.tr-modal, .tr-modal .tr-title, .tr-modal .tr-content, .tr-modal .tr-info {box-sizing: border-box;}

<div id="testReading_value"></div>  
<div class="message" id="testReadText">$MESSAGE$</div>