CODEWITHSUNDEEP
javascriptarraysradio-button
Soro
Soro

Reputation: 15

How to connect array elements with radio buttons

I'm trying to make a simple quiz with radio button options. The quiz has one button that should dynamically remove and add the next question, and set of radio buttons. The questions and options stored in separate arrays. I am stuck on trying to connect each option with a radio button. Any ideas how to go about with this?

P.S. Just started learning JS as you might tell from my code

<script type="text/javascript">
var questionsArray = new Array();
questionsArray[0] = "1. Who's the president of the US?";
questionsArray[1] = "2. What is the capital city of France?";
questionsArray[2] = "3. What is your favorite food?";

var choicesArray = new Array();
choicesArray[0] = ["Lebron James", "Barack Obama", "George Bush","George Clooney"];
choicesArray[1] = ["Nairobi","London","Paris","Sydney"];
choicesArray[2] = ["Pizza","Sushi","Pasta","Lobster"];

function createRadioElement(name){
  var radioHTML = '<input type="radio" name="'+name+'"'+'/>';

  var radioFragment = document.createElement("div");
  radioFragment.innerHTML = radioHTML;

  return radioFragment.firstChild;
}

var index = -1;
function questionSwapOnclick(){
  while(index < questionsArray.length){
    index++;
    document.getElementById("question").innerHTML = questionsArray[index];

    if(document.getElementById("question").innerHTML == "undefined"){
      document.getElementById("question").innerHTML = "Finished the quiz!"
      document.getElementById("choices").innerHTML = ""
    }

    var splitChoices = choicesArray[index].join("<br />");
    document.getElementById("choices").innerHTML = splitChoices;
    return true;
  }
}

</script>

Upvotes: 0

Views: 152

Answers (1)

Arthur Shlain
Arthur Shlain

Reputation: 1099

Why not keep the questions in the html? JS Fiddle

<form id="questions">
<div class="question active">
    <p>1. Who's the president of the US?</p>
    <label>
        <input type="radio" name="q1" value="1">Lebron James</label>
    <label>
        <input type="radio" name="q1" value="2">Barack Obama</label>
    <label>
        <input type="radio" name="q1" value="3">George Bush</label>
</div>
<div class="question" style="display: none;">
    <p>2. What is the capital city of France?</p><label>
        <input type="radio" name="q2" value="1">Nairobi</label>
    <label>
        <input type="radio" name="q2" value="2">London</label>
    <label>
        <input type="radio" name="q2" value="3">Paris</label>
</div>
<div class="question" style="display: none;">
    <p>3. What is your favorite food?</p>
    <input type="radio" name="q3" value="1">Pizza</label>
    <label>
        <input type="radio" name="q3" value="2">Sushi</label>
    <label>
        <input type="radio" name="q3" value="3">Pasta</label>
</div>
<hr> <a href="#" id="next">Next question »</a>


// used jquery 1.11.0
$(function () {

var questions = $('#questions');
var next_btn = $('#next');

next_btn.on('click', function () {
    var active_question = questions.find('.active');

    if (active_question.find('input[type=radio]:checked').length) {
        active_question.slideUp(500, function(){
            active_question.removeClass('active');
        });
        if(active_question.next('.question').length){
            active_question.next('.question').addClass('active').slideDown(500);
        }
        else {
            alert('Thank you!');
            alert(questions.serialize());
            questions.hide();
        }
    }
    else {
        alert('Select answer!');
    }
});
});

Upvotes: 1

Related Questions