"Скорочтение" для uCoz

Наверх!
"Скорочтение" для uCoz
Демо Скачать
Доп. услуги

Описание

Относительно недавно на сайтах, обычно со статьями, появилась фишка, которая показывала сколько времени вы затратите на прочтения определённого текста.
Скрипт был предельно прост: количество слов в тексте делим на среднее количество слов в минуту (в взрослого человека это 120-180 слов в минуту).

Вроде не трудно.. Но почему бы не учитывать тот факт, что люди разные?
Ребёнок, подросток, взрослый, пожилой.. И каждая "группа" может читать по разному, кто-то быстро, кто-то медленнее.

Мой же скрипт учитывает этот факт, даже больше, он напрямую связан с пользователем.
Пользователю предлагается небольшой текст (можно даже меньше или больше, по количеству слов), который он должен прочитать.
После прохождения теста, пользователь получит информацию о том, сколько он затратил времени на прочтение тестового текста.
А в дальнейшем в других текстах будет выводиться примерное затрачиваемое время на текст. Удобно? Да!

Всё происходит на стороне пользователя. Данные хранятся в браузере и никто не сможет их получить. Да и зачем такие данные кому-то?

Установка:

Добавьте этот код в нижную часть сайт:
Код
<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>


Этот в CSS:
Код
#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;}


Далее всё проще, вам нужно выбрать тот текст, который будет "считаться" и пометить его как id="testReadText", а там, где будет выводить информация о прочтение, добавить блок с атрибутом id="testReading_value"
Будет выглядеть примерно так:
Код
<div id="testReading_value"></div>
<div class="message" id="testReadText">$MESSAGE$</div>

Важно

При копирование материала указывайте ссылку на страницу и автора материала.
Адресом страницы является ссылка: http://pandora.clan.su/publ/1-1-0-63
Автором материала является: Denis Minov (CbIPoK2513)

Лицензия GNU GPL от 2018 года.
Дополнительно
Комментарии
Комментов нет.. Печально. Может оставишь свой коммент?
Комментарии могут оставлять только зарегистрированные пользователи.