Как сделать все в одном окне?

Question

[hollanditkzn]

Такой момент, что один вопрос появлялся на экране и после ответа, появлялся второй вопрос на весь экран. В принципе как в любом тестирование. Как стоит здесь делать? ajax запросом в при отправке одной формы? типо 1 форма 1 вопрос? или как-то по другому такое реализовать.
мое опасение в том, что при отправке формы ajax то выходит большой ajax запросы если вопросов 12? то нужно писать все 12 ajax запросов.
И как еще при этом таймер привязать к закрытие теста?

Answer 1

[Евгений Вольф]

Такой момент, что один вопрос появлялся на экране и после ответа, появлялся второй вопрос на весь экран. В принципе как в любом тестирование. Как стоит здесь делать?

Записать все 12 вопросов в одну форму, в 12 разных блоков. Показывать следующий блок после ответа на вопрос. Форма - одна. Др-ть сервер AJAX'ом каждый раз - идея плохая, так как:
1. Загрузится всё то же самое, что и за одну загрузку, но одним запросом - это будет быстрее и промежуточных данных меньше
2. Пользователю не придётся постоянно ждать подгрузки данных между ответами

И как еще при этом таймер привязать к закрытие теста?

Таймер - не надо привязывать. Берёте любой таймер на JS, коих валом или пишите простейший свой таймер (в зависимости от ваших потребностей). А на сервере соотв. проверяете время начала теста и время его окончания, если пользователь уложился в отведенный интервал - всё ок, если же нет...

Comments

[Александр Вульф]

Др-ть сервер AJAX'ом каждый раз - идея плохая,

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

[hollanditkzn]

Евгений Вольф

в 12 разных блоков. Показывать следующий блок после ответа на вопрос

Вопрос, а блоки я раставляю data-key исоответвтенн я их и беру?
Просто у меня приходит mysql я сделал их в объект и сейчас надо как-то все сформировать нормально

[Евгений Вольф]

hollanditkzn, по ID'шнику можно их переключать или просто брать следующий слой (следующий за видимым). Например, через JQuery это реализуется очень легко.

[hollanditkzn]

Евгений Вольф, Сейчас попробую и отпишу если что-то не получилось

[hollanditkzn]

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

.get('/testing/:id', async ctx => {
        let theme = await Test.theme(ctx.params.id);
        let test = await Test.test(ctx.params.id);
        let answearArr = await Promise.all(test.map(item => {
            return Test.answear(item.id);
        }));

        for(let n=0; n<answearArr.length; n++){
            test[n].answer = answearArr[n];
        }

        await ctx.render('test', {
            title: 'Тест',
            path: 'test',
            thema: theme[0],
            test: rand_array(0, 2, test),
        })
    })

И во вьюшке их показываю

mixin question(number)
    .question(id=number)
        p=test[number].name
        ul
            each answear in test[number].answer
                li
                    input(type='radio' name=answear.id_question)
                    | #{answear.text}
        button.buttonTest Ответить
include layout
    .container
        h1=thema.name
        form
            +question(0)
            +question(1)
            +question(2)

пробовал в стиле сделать display: block и по id #0 тоже дисплей block. Но ничего не получается

[hollanditkzn]

Евгений Вольф, Или один блок, и там непосредственно через jquery меняется данные после нажатие? или не так надо все?

[Евгений Вольф]

hollanditkzn, очень примитивный пример.