Как можно реализовать такое приложение на javascript?

Question

[MaxYenot]

Здравствуйте. Делаю полностью фронт-енд приложение. Оно выводит на "доску" предложения/слова с переводом.
Одновременно идут какие-то объяснения голосом (на данный момент использую WebSpeechAPI, поэтому точно работает в Google Chrome).
Ссылка github pages:
https://maxyenot.github.io/explainApp.html
код:
https://github.com/MaxYenot/yenot
Мне хотелось бы понять как создавать несколько таких объяснялок на странице. Например, с кнопками "Следующее предложение", "предыдущее предложение" Но навыков js программирования не хватает. Что нужно использовать?
Функцию-конструктор? Массивы? Или сделать html-карточки, и написать js обработчик (по типу как делаются html слайды с текстом)
По идее, если объяснялок несколько на странице, то нужно использовать массив (на мой взгляд)
Но что в этот массив упаковывать?
Мне бы хотелось, чтобы мне подсказали как это делается, расписали пошагово, что нужно. А я бы сам уже сделал.
Мне это чем-то напоминает функционал слайдера, только вместо изображения здесь вывод текста и голосовое сопровождение. И слайды не перелистываются автоматически.
Я просто не знаю, как это проектируется на javascript

Comments

[sim3x]

Разместите на гитхаб пейджес

Что именно не получается сделать?

[MaxYenot]

sim3x,
https://maxyenot.github.io/explainApp.html
код:
https://github.com/MaxYenot/yenot
Получилось написать функционал, который 1. проговаривает голосом какие-то объяснения 2. выводит пояснительные записки.
Но. Надо подумать как сделать, чтобы на одной странице было несколько подобных объяснений.
Мне это чем-то напоминает функционал слайдера, только вместо изображения здесь вывод текста и голосовое сопровождение. И слайды не перелистываются автоматически.
Я просто не знаю, как это проектируется на javascript
Что-то вроде этого, вероятно, должно получиться.

var объяснения = [Object
,Object
,Object
,Object]

кнопкаСледующийСлайд.onclick = function(){
//переходим на следующий слайд / объяснение
}
кнопкаПредыдущийСлайд.onclick = function(){
// переходим на предыдущий слайд / объяснение
}

[sim3x]

MaxYenot, те не знаете, как
- разбить набор букв по пробелу
- перевести его в массив
- пройтись по масиву в цикле?

Вам стоит начать учить жс заново

[MaxYenot]

sim3x, Всё это мне известно. Но при чём тут набор букв?
Смотрите,
+++++
Первое объяснение/слайд
Фраза: where can I buy stamps and envelopes?
Перевод: Где я могу купить марки и конверты?
НовоеСлово1: where - где
НовоеСлово2: buy - покупать
НовоеСлово10: ...... - перевод
Комментарий: //комментарий про порядок слов в повествовательном и вопросительном предложении//
++++
Функционал такой, что голос говорит фразу, на экране появляется фраза.
Затем голос говорит новые слова и на экране появляются новые слова постепенно
Затем голос говорит комментарий, на экран выводится пример предложения

+++++
Второй слайд похожий на первый, Но фраза другая, новые слова другие (Но вместо перевода, или вместе с переводом, появляется ещё картинка)
+++++
Это для учеников я пишу, в помощь дома. И ученик должен иметь возможность выбрать фразу, которую он забыл и хочет послушать объяснение. Или хотя бы кнопки далее/предыдущее были.
В идеале, написать функционал, поместить в .js файл, и на следующий урок на новой веб странице его подгрузить, и просто прописать новые слайды/объяснения.

Я изучаю js по mdn. Но я подобные приложения не делал. Опираясь на свои знания, я предполагаю, что надо использовать объект (ведь есть свойства (переменные) и функционал, который это всё выводит на экран и воспроизводит аудио (методы))

Правильный ход мыслей?

[sim3x]

MaxYenot,

Если данные под "слайды" заранее сформированы, то вообще не понятно с чем сложность

[MaxYenot]

Есть некоторые соображения уже. После работы попробую дописать.
Просто сейчас просто код, без объектов.

[MaxYenot]

sim3x, я надеялся услышать советы вроде : сделать это на фронт Энде, а это на бэк Энде;
Использовать json ;
Написать конструктор и в массив поместить его экземпляры и т.д

[sim3x]

MaxYenot,

Всю подготовку делаете руками
Сохраняете в жсон
В браузере проходитесь по дикту из жсона в цикле