Скрипт "скорочтение" для сайта 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 Демо: ссылка |
Поделиться в социальных сетях
Материал разместил
Комментарии: 2 | |
| |