Интерактивные карточки для изучения слов
Есть клиент который прислал такое ТЗ, сделать можно без CMS если это будет проще.
Интересует точная стоимость и точный срок.
Интерактивные карточки для изучения слов с возможностью быстрого редактирования контента на HTML
Задание:
создать по подобию https://www.gameslearnchinese.com/game/ только проще, без таймера, подсчёта очков и доступов.
Созданная вами страница start.html будет запускаться только на локальном компьютере без доступа к интернету.
Страница разделена вертикальной полосой на 2 части. Слева малая часть — список уровней знания языка (от 01 до 30) где каждая кнопка — просто ссылка на файл start.html который есть в каждом каталоге с названием 01 02 03… 30 (при этом мы стартовали из каталога 01 и каждый каталог имеет файл start.html )
При выборе одного из уровней в правой части окна — большая часть — отображены модули для данного уровня (большие квадраты с названием темы: животные, еда, транспорт)
По умолчанию до нажатия любого уровня уже выбран первый и в правой половине странички уже расположены модули первого уровня.
При выборе одного модуля начинается тест.
(вариант А — изображения в вариантах ответа)
Тест состоит из 20-25 слайдов: слов, которые произносятся по одному в случайном порядке до бесконечности по продолжительности (не ограничено). Аудио файлы 25 штук будут в том же каталоге, что и html страничка: audio001.mp3, audio002.mp3, audio003.mp3… audio025.mp3
При работе модуля: при воспроизведении звука слова, на правой половине страницы (там где выбран модуль): левый край — написание данного слова на языке оригинала, правый край представляет собой 9 изображений (3х3 картинок), среди которых есть изображение данного слова (взятых в случайном порядке из того же каталога, что и запущенная html страничка: pic001.jpg, pic002.jpg, pic03.jpg, pic004.jpg, pic005.jpg… pic025.jpg) Из этих 9 изображений одно должно быть ответом на слово оригинал и 8 любых других из 25 имеющихся, выбранных случайным порядком, но при этом одновременно 2 одинаковых изображения не должно быть.
Порядок появления каждого из 25 произносимых в тесте слов должен быть случайным. При этом кроме случайности, есть еще одно правило:
предыдущее слово может быть повторено не ранее чем через 1 (или 2-3) раза — чтобы был немножко принудительный разнобой помимо генерации случайного порядка.
При нажатии на один из 9 вариантов ответа HTML-страница дает оценку ответу
(верно или неверно) и воспроизводит соответствующий звуковой файл (будет в том же каталоге, что и html страничка: yes.mp3 и no.mp3 и переходит к
следующему слайду с новым словом и вариантами перевода.
При неверном ответе: неправильно выбранное слово-оригинал получает повышенный приоритет для показа в следующий раз: например, принудительно появляется каждый 4й раз до 4 правильных ответов подряд на него. Одновременно про неверно выбранное слово-перевод: его оригинал принудительно появляется каждый 5й раз до 2 верных ответов. При выполнении и того и того условия приоритет возвращается обычный.
P.S. Также необходимо создать вторую — альтернативную версию слайда (вариант Б) — вместо 9 картинок 3х3, в правой части для выбора будет текстовый вариант перевода (9 фраз одна ниже другой столбиком).
аудио (звук) оригинал слов будут расположены в том же каталоге, что и html страница, в виде mp3 файлов: audio001.mp3, audio002.mp3, audio003.mp3… audio025.mp3
оригиналы слов текстовые будут расположены в том же каталоге, что и html страница, в виде текстовых файлов: orig001.txt, orig002.txt, orig003.txt… orig025.txt
картинки ответов для выбора из 3х3 будут расположены в том же каталоге, что и html страница, в виде jpg файлов: pic001.jpg, pic002.jpg, pic003.jpg… pic025.jpg
ответы слов текстовые для варианта Б будут в том же каталоге, что и html страница, в виде текст файлов: trans001.txt, trans002.txt, trans003.txt… trans025.txt