[Решено] Интерактивность в статьях Joomla - Joomla 3.x: Общие вопросы

Здравствуйте.
Как в статьях можно сделать какую-либо интерактивность? Например, есть урок по ЕГЭ, человек заполнил формы ввода, нажал кнопку, формы с ошибками подсветились (также, например, добавился текст пояснения в чем ошибка), под уроком добавилось поле с количеством набранных баллов.
Сложно это всё делается? Может где-то туториалы есть какие-нибудь? Какие технологии тут нужны? Javascript знаю можно в статью запихнуть, он такое может сделать?
Спасибо.

Да, JavaScript вам поможет! И стили. И HTML, и, чуть-чуть, PHP(но это не точно). А ещё вам поможет правильное умение разграничения задач. Нпример, вы хотите ошибки подсвечивать - вот и ищите варианты реализации подсвечивания ошибок после отправки формы. Т.е. вам нужно маленькими этапами пройти весь тот объём, который написали и будет вам интерактив...

подсвечивания ошибок после отправки формы

Спасибо за совет.
А как найти как добавляется текст на определенное место? Также не нужно перезагружать страницу.
HTML и CSS основное знаю, в остальном не уверен, что смогу найти ответы...

А как найти как добавляется текст на определенное место?

В смысле? Смотрите в инспекторе, какой селектор у родителя, какой у добавляемого элемента и ищите в скриптах обращение по тим селекторам. Ещё, как вариант, изучите функцию, которая обрабатывает нажатие на кнопку отправки/проверки (ну или что у вас там). Он обычно биндится и его в инспекторе видно.
А вообще, перед тем как делать, лучше попрактикуйтесь с JS, т.к. при всём желании вам помоч - объяснять с нуля никто не станет. Могут толькко пнуть в нужном направлении, а дальше сами. Или готовьте ТЗ и добро пожаловать в коммерческий раздел

Первый абзац ваш плохочитаем Я просто хотел побольше информации собрать, понять что для этого нужно, а так может и обратился бы в коммерческий раздел...

Первый абзац ваш плохочитаем

А вообще, перед тем как делать, лучше попрактикуйтесь с JS, т.к. при всём желании вам помоч - объяснять с нуля никто не станет.

Вот об этом я и говорю. Вы знаете, что такое инспектор в браузере? Как им пользоваться? Как понять, какой скрипт "слушает" события?
Я подозреваю, что нет. Вот поэтому и объяснять вам тяжело...

Вы знаете, что такое инспектор в браузере?

Знаю

Как понять, какой скрипт "слушает" события?

Ой, всё... 
 

С нуля сами запаритесь такое делать. Гуглите компонент квиза.
Пример. Там есть все, что вы описали, только вывод в др.форме.

компонент квиза

Компонент кажется навороченным. Плюс не хочется в зависимость попадать, в один уже попал, боюсь, как бы его кардинально не поменяли в 4-ой Joomla...
Мне казалось, что это не сложная работа, добавить много if-ов в код, только что как по нажатию менять содержимое готовой страницы - это я не знаю как. Кажется, что программеры бы состряпали примерный код из своих готовых работ за час...

Можно сделать на уровне модуля, который потом выводить в статье . Разные модули- разные вопрос/ответы .

Мне казалось, что это не сложная работа, добавить много if-ов в код, только что как по нажатию менять содержимое готовой страницы - это я не знаю как. Кажется, что программеры бы состряпали примерный код из своих готовых работ за час...

Да, именно "казалось". И потом, час работы специалиста - от 20$.

Разные модули- разные вопрос/ответы .

Опять же - модули надо написать. А вопросов/ответов, наверное, не одна сотня.

Да, именно "казалось".

Просто было дело как-то, на js смог состряпать проверку форм и вывести в диалоговое окно результат. Нашел пример в туториалах... 
Здесь просто надо попрофессиональнее, не кажется, что эта задача намного сложнее... Все красивости HTML и CSS я доделаю, мне бы про программный костяк вопроса узнать 
Пока песчинки насобирал... 

creative3d - дайте конкретную небольшую задачу - набросаем вам скрипт на jquery для примера работы с DOM\формами, а дальше уже документации море ведь.
Но знаю по себе - лучше понимается когда есть изначальная "нерешаемая" задача, что выполняется в итоге в пару строк.
Так что - давайте задачу, я дам код и дальше только ваша фантазия

Так что - давайте задачу

beliyadm, спасибо за отклик! (почему-то не было уведомления о нем...)
Пример начала теста:
(Надо закончить предложения, введя в input правильное слово в правильной форме)
1. I didn’t have much |форма для ввода| – just two small bags.
2. They’ll tell you all you want to know. They’ll give you plenty of |форма для ввода|.
...
Кнопка "проверить тест".
По нажатию кнопки: под ней добавляется параграф или div, в котором написано: вы набрали столько-то баллов из 100.
При этом формы ввода подсветились зелененьким, если ввели правильный ответ, или красным, если ввели неправильный ответ. Под красными формами добавился div с пояснениями об ошибке.
Вот это основное, что хотелось бы сделать.

Кнопка "проверить тест". По нажатию кнопки: под ней добавляется параграф или div, в котором написано: вы набрали столько-то баллов из 100. При этом формы ввода подсветились зелененьким, если ввели правильный ответ, или красным, если ввели неправильный ответ. Под красными формами добавился div с пояснениями об ошибке.

ах#@!?$ть 
Нормальные такие у вас задачки! А можно поинтересоваться, как вы вообще это чудо в материалах Joomla реализовывать собрались?

ах#@!?$ть 
Нормальные такие у вас задачки!

Это я уже сразу понял .

А можно поинтересоваться, как вы вообще это чудо в материалах Joomla реализовывать собрались?

И еще за час!
А вот это

Пример. Там есть все, что вы описали, только вывод в др.форме.

- почему-то слишком сложно .

Нормальные такие у вас задачки!

Спасибо 

Ну вы блин даете, прыгать с этого

на js смог состряпать проверку форм и вывести в диалоговое окно результат

на это

(Надо закончить предложения, введя в input правильное слово в правильной форме)

Тут по большому счету для начала не красивости на JS придумывать, а иметь надо базу подобную морфологическую и еще для нужного языка.
Даже не знаю с чего начать ) Задача то у вас сродни построению поиска яндекса\гугля с нуля (где он исправляет слова\ошибки и тд)....
И писать это не на js\php и mysql нужно, а сразу на ассемблере для быстроты работы.

Даже не знаю с чего начать ) Задача то у вас сродни построению поиска яндекса\гугля с нуля (где он исправляет слова\ошибки и тд)....

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

прыгать с этого на это

Я не в курсе насколько дальше надо прыгать, поэтому и спрашиваю...

Задача то у вас сродни построению поиска яндекса\гугля с нуля

Вы тут явно не поняли мою задачу, то объяснение в скобках это почти для юзеров, а не для программистов. Форма ввода просто должна сравнить то, что ввели юзеры с правильными ответами, если юзер ввел правильно, ему в переменную var добавилось столько-то баллов, по итогам проверки, результаты вывелись в div, "вы набрали var баллов из 100". Прочитайте еще раз, тут явно никакой ассемблер не нужен. В любом плагине есть такая элементарщина, тут просто надо в статью... Может где готовые скрипты есть, которые надо подключить, просто не знаю даже что гуглить надо... Находил скрипт, который динамически скрывает/открывает текст по нажатию на текст, но это готовый текст и по нажатию на текст, а не на кнопку.

Товарищ @beliyadm конечно с ассемблером перегнул. 
Но вот на одном js тут не уедешь! Нужно писать серверную часть, кторая будет брать из базы правильные ответы и сравнивать их с полученными от пользователя, считать балы, генерировать сообщения об ошибках и т.д.
Js нужен будет дял того, чтоб на сервер отправлять эти данные, без перезагрузки страницы, а потом получать данные, выводить баллы и показывать ошибки

элементарщина

Ну-ну...

Находил скрипт, который динамически скрывает/открывает текст

Тут уже вы явно не поняли свою задачу , точнее - поняли, но только ее внешний вид.

Форма ввода просто должна сравнить то, что ввели юзеры с правильными ответами, если юзер ввел правильно, ему в переменную var

переменная var это сильно

kern.USR прав (про ассемблер с моей стороны это была шутка) про серверную часть. Нужно в базе иметь таблицу соответствий: условие-правильный ответ.
На JS мы пишем AJAX запрос к php скрипту, что сравнивает введенные символы с совпадением по данному условию и возвращает результат (с ним уже можно и на js на фронте работать). Ну и запрос отправлять я не знаю как вы планируете, по вводимым символам (типа keypress каждый раз сервер опрашивать).

В принципе задача решается не очень сложно (если подходить с позиции когда знаешь как это делать).
Нужна база соответствий ответов и небольшое ТЗ на функционал и сделать это можно в рамках модуля, который будет вставляться в статью (к примеру).
Уж не знаю как еще детальней расписать без отправки в коммерческий раздел. Полностью готовый код никто писать не будет. Набросать основу могу конечно, если поможет.

переменная var это сильно

Всё, чтобы программисты поняли 

В принципе задача решается не очень сложно

А добавление div-а без перезагрузки страницы - вы это тоже учитываете?

Нужно в базе иметь таблицу соответствий

А обязательно усложнять? Нельзя ли чтобы нужные соответствия были в переменных перед началом кода?

А добавление div-а без перезагрузки страницы - вы это тоже учитываете?

Конечно

А обязательно усложнять? Нельзя ли чтобы нужные соответствия были в переменных перед началом кода?

Можно и так, заранее создать массив в JS опять же такой же структуры вопрос\ответ.
Это по сути не сильно принципиально, по вводу символов проверять массив в js или отправлять запрос на сервер к базе.

creative3d вот вам простейший пример подобной формы с проверкой на лету и выдачей результата https://jsfiddle.net/4n8f1jh1/

Код накидан на глаз без всяких проверок естественно.
И имейте в виду - делать тесты основанные на проверке только в JS - плохая идея. Все делается в браузере на уровне клиента и любой школьник может посмотреть ваш массив ответов и в консоли выдать правильный результат. Изначальное мое предложение было делать проверку на сервере и возвращать результат - так правильно.

А обязательно усложнять? Нельзя ли чтобы нужные соответствия были в переменных перед началом кода?

только если "правдивость" теста не так уж и важна

только если "правдивость" теста не так уж и важна

Ну я на это намекал, что когда вся проверка на уровне JS любой школьник в консоли изменит все что надо.
Посмотрим что скажет, мне кажется что мой ***код для примера и есть то что он хотел )))))

Чуть позже отпишусь, спасибо

Я в обычном HTML с подключенной jquery.min.js смог запустить. Кажется такого варианта будет вполне достаточно!
Вот только в Joomla статье не работает, по нажатии на кнопку перезагружается страница. Кажется, что та библиотека не срабатывает, хотя подключена
Это же почти одно и то же. Надо что-то еще подключать в шаблон сайта или как заставить этот работать?