Communicating with radio buttons you can't see in your script

I'm creating a quiz app with Laravel. I have 6 questions, 24 answers, and 6 pages altogether. I have 1 question per page and 4 answers (with radio buttons) per page. So, 24 radio buttons in total.

I want to be able to communicate with all 24 radio buttons through JavaScript. My issue is, because I used the query builder paginate method to paginate my data, I can only see the first 4 radio buttons in my script:

{!! Form::open() !!} {{Form::label('option', 'Option One')}} {{Form::radio('radio', '1', array('required' => 'required'))}} {{Form::label('option', 'Option Two')}} {{Form::radio('radio', '2')}} {{Form::label('option', 'Option Three')}} {{Form::radio('radio', '3')}} {{Form::label('option', 'Option Four')}} {{Form::radio('radio', '4')}} {!! Form::close() !!}

Is there any way I can access the other 20 radio buttons that are displayed to the end-user but aren't written in my script?

I hope this makes sense. Thanks.

mvd

6 years ago

Level 48

Hi @harrisongreeves,

Everyone sees just 1 question, the (default) pagination functionlity does not use javascript so each step is a new page.

You could set a session or write the current results into the database after each answer submit Get this result with an ajax call to get result.

other option is to use a multi form with javascript, like https://github.com/BinarCode/vue-form-wizard or https://github.com/tushargugnani/vue-simple-form-wizard

Tray2

6 years ago

Best Answer

Level 73

I would load all the questions into my view and then use javascript to hide and show the ones I want.

Something like

<div id="question1">
    <button onclick="displayQuestion(2)">Next</button>
</div>
<div id="question2" class="is-hidden">
</div>


<script>
    function displayQuestion(question) {
        document.querySelector('#question1').classList.add('is-hidden');    
        document.querySelector('#question2').classList.add('is-hidden');    
        document.querySelector('#question3').classList.add('is-hidden');    
        document.querySelector('#question4').classList.add('is-hidden');    
        document.querySelector("#question" + question).classList.remove('is-hidden');   
        }
</script>

1 like

aurawindsurfing

6 years ago

Level 50

@tray2 answer is probably the easiest to implement and easy to understand.

HarrisonGreeves

6 years ago

Level 1

Do you need to know Vue to be able to use those forms?

HarrisonGreeves

6 years ago

Level 1

This is a good start. But the issue is displaying certain answer sets on certain pages so that they match the correct questions. E.g. answers 1-4 go with the first question on the first page and answers 5-8 go with the second question on the second page etc.

How would I make sure that certain answers are showing on one page but hidden on another? I don't know how to target specific pages when those pages are rendered with pagination in Laravel.

It's also not the questions that need to be managed. It's 24 answers.

Please or to participate in this conversation.