MyTetra Share
Делитесь знаниями!
Как убрать буквы на клавиатуре в Клавогонках?
Время создания: 08.11.2022 13:42
Текстовые метки: клавогонки, klavogonki, надпись, буква, тренажер, клавиатура, скрыть, убрать, greasemonkey, скрипт, java script, слепая печать, скоростная печать
Раздел: Компьютер - Web / Internet - Полезные сервисы
Запись: xintrea/mytetra_syncro/master/base/1667904145n8x1c8ypvq/text.html на raw.github.com

Всем хорош онлайн-тренажер клавиатуры Klavogonki.ru. Но чего-то в нем не хватает. Что же с ним не так? Все просто: слишком большой скачек сложности в тот момент, когда обучающийся скрывает экранную клавиатуру.





Можно ли этот скачек сложности как-нибудь сгладить? Да! Идея в том, чтобы показывать экранную клавиатуру, на которой не видно букв. По мере набора текста, на такой клавиатуре будет выделяться клавиша, но какой букве она соответсвует - не видно. Таким образом теряется визуальная связь между тем, какую клавишу надо нажать и какой букве она соответствует: видно только положение клавиши. Это и есть недостающая ступенька в постепенном повышении сложности.





Естественно, ждать пока разработчики сайта сделают такую функциональность не имеет смысла, так как у нас есть плагин для браузера Greasemonkey. С помощью него можно написать скрипт, который подменит картинки клавиатуры. И задача будет решена.


Здесь показано, как можно модифицировать английскую клавиатуру. Но, по тем же самым принципам можно изменить и клавиатуру с русской раскладкой.



Подготовка


Итак, что надо сделать?


Во-первых, необходимо установить плагин Greasemonkey.


Во-вторых, надо разобраться, какие картинки отвечают за клавиатуру. Это делается просто: по правой кнопке выделяется элемент (картинка клавиатуры) и в контекстном меню выбирается Исследовать:





Можно увидеть, что клавиатура состоит из двух картинок, размещенных как фоновые картинки в блоках <div> с идентификаторами back_keyboard и fore_keyboard:





Сами картинки лежат по следующим урлам:



http://klavogonki.ru/img/back_keyboard_en.gif

http://klavogonki.ru/img/fore_keyboard_en.gif



В третьих, надо выкачать эти картинки, стереть в них буквы любым графическим редактором, и разместить исправленные картинки где-нибудь в Интернете. Например, можно воспользоваться сервисом ImgBB. Главное, что нужно получить прямые ссылки на картинки, а не просто ссылки на страницы картинкок:





В результате получатся примерно такие прямые ссылки:



https://i.ibb.co/H98Vpe9/back-keyboard-en.png

https://i.ibb.co/B5LG95k/fore-keyboard-en.png



Размещать картинки в интенете надо потому, что браузер не сможет использовать локальные картинки, ссылаясь на правила безопасности.



Скрипт


Далее, нажав на иконку обезьянки, в Greasemonkey нужно создать скрипт следующего содержания:



// ==UserScript==

// @name Klavogonki - Romove EN labels

// @description Удаление надписей на EN клавиатуре в Клавогонках

// @version 1

// @grant none

// @include http://klavogonki.ru/g/?gmid=*

// ==/UserScript==


// alert('Hello world!');


var backKeyboardElement = document.getElementById('back_keyboard');

var foreKeyboardElement = document.getElementById('fore_keyboard');


backKeyboardElement.style.background="transparent url(https://i.ibb.co/H98Vpe9/back-keyboard-en.png)";

foreKeyboardElement.style.background="transparent url(https://i.ibb.co/B5LG95k/fore-keyboard-en.png)";



Внимание: В этом скрипте надо не забыть поменять линки на картинки клавиатуры.


* * *


Вот и все дела! После сохранения этого скрипта, новые заезды в клавогонках будут сопровождаться клавиатурой, на которой не видно букв. Кстати, если нужно увидеть клавиатуру с буквами, данный скрипт можно просто временно отключить, и тогда сайт Клавогонки будет работать без изменений.


Так же в этом разделе:
 
MyTetra Share v.0.60
Яндекс индекс цитирования