ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Скрипт "скорочтение" для сайта uCoz

Скрипт "скорочтение" для сайта 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>


Источник: pandora.clan.su
Демо: ссылка
17 Ноября 2018 Просмотров: 1455 Комментариев: (2)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 2
root
root 22 Января 2019 23:451
-1
Как- то вбросил идею этого скрипта одному чуваку, увидев на одном сайте новостей, и появилась эта хрень
Но такой говно реализации еще не видел.

P.S. Больше я на этот сайт не зайду, так что смысла отвечать на мой коммент нет
Kosten
Kosten 23 Января 2019 00:392
0
Почему вы так к себе критично, но возможно есть смысл ответить. Просто пост полностью не открылся, так как "говно" просто написать, а вот почему оно такое по вашему мнению, а это вы сами гадайте.

Цитата root ()
P.S. Больше я на этот сайт не зайду, так что смысла отвечать на мой коммент нет
avatar