Radio button style with javascript

Question

I created a quiz app which contains radio buttons but I want the radio button to display in a vertical line with boxes around it. I tried doing this with CSS by calling the choices ID but it did not work.

Example of how I want it to look:

Instead of this:

 var quiz = [{
          "question": "What is the full form of IP?",
          "choices": ["Internet Provider", "Internet Port", "Internet Protocol" , "Other"],
          "correct": "Other"
        }, {
          "question": "Who is the founder of Microsoft?",
          "choices": ["Bill Gates", "Steve Jobs", "Steve Wozniak" , "Martin Shaba"],
          "correct": "Bill Gates"
        }, {
          "question": "What was your first dream?",
          "choices": ["8 bits", "64 bits", "1024 bits"],
          "correct": "8 bits"
        }, {
          "question": "The C programming language was developed by?",
          "choices": ["Brendan Eich", "Dennis Ritchie", "Guido van Rossum"],
          "correct": "Dennis Ritchie"
        }, {
          "question": "What does CC mean in emails?",
          "choices": ["Carbon Copy", "Creative Commons", "other"],
          "correct": "Carbon Copy"
        }];


// define elements
var content = $("content"),
questionContainer = $("question"),
choicesContainer = $("choices"),
scoreContainer = $("score"),
submitBtn = $("submit");

// init vars
var currentQuestion = 0,
score = 0,
askingQuestion = true;

function $(id) { // shortcut for document.getElementById
  return document.getElementById(id);
}

function askQuestion() {
  var choices = quiz[currentQuestion].choices,
  choicesHtml = "";

  // loop through choices, and create radio buttons
  for (var i = 0; i < choices.length; i++) {
    choicesHtml += "<input type='radio' name='quiz" + currentQuestion +
    "' id='choice" + (i + 1) +
    "' value='" + choices[i] + "'>" +
    " <label for='choice" + (i + 1) + "'>" + choices[i] + "</label><br>";
  }

  // load the question
  questionContainer.textContent = quiz[currentQuestion].question;

  // load the choices
  choicesContainer.innerHTML = choicesHtml;

  // setup for the first time
  if (currentQuestion === 0) {
    scoreContainer.textContent = "0 correct out of " +
    quiz.length + "";
   // submitBtn.textContent = "Submit Answer";
  }

  var radios = document.querySelectorAll('input[type=radio]');
  [].forEach.call(radios, function(radio) {
    radio.onchange = function() {
      checkAnswer();
    }
  })   
}

function checkAnswer() {
  // are we asking a question, or proceeding to next question?
  if (askingQuestion) {
   // submitBtn.textContent = "Next Question";
    askingQuestion = false;

    // determine which radio button they clicked
    var userpick,
    correctIndex,
    radios = document.getElementsByName("quiz" + currentQuestion);
    for (var i = 0; i < radios.length; i++) {
      if (radios[i].checked) { // if this radio button is checked
        userpick = radios[i].value;
      }

      // get index of correct answer
      if (radios[i].value == quiz[currentQuestion].correct) {
        correctIndex = i;
      }
    }

    // setup if they got it right, or wrong

    if (userpick == quiz[currentQuestion].correct) {
      score++;
    } else {
    }

    scoreContainer.textContent = "" + score + " correct out of " +
    quiz.length + "";


    askingQuestion = true;
    // change button text back to "Submit Answer"
    //submitBtn.textContent = "Submit Answer";
    // if we're not on last question, increase question number
    if (currentQuestion < quiz.length - 1) {
      currentQuestion++;
      askQuestion();
    } else {
      showFinalResults();
    }
  } else { 
  }
}

function showFinalResults() {
  content.innerHTML = "<h1>You did amazing!</h1>" +
  "<h5>Below are your results</h5>" +
  "<h2>" + score + " out of " + quiz.length + " questions, " +
  Math.round(score / quiz.length * 100) + "%<h2>";
}

window.addEventListener("load", askQuestion, false);
submitBtn.addEventListener("click", checkAnswer, false);

CSS:

#container {
  max-width:600px;
  height: auto;
  background: #59C1DA;
  border: 10px solid #333;
  border-radius: 5px;
  margin: auto;
  text-align: center;
}

    #content {
      border: 10px solid #fff;
      padding: 15px;
      color: #fff;
    #question {
      font-weight: bold;
    }
    #score {
      margin-top: 20px;
      font-weight: bold;
    }

The buttons are not centered:

Dave · Accepted Answer · 2016-03-23 17:09:51Z

3

You can do this in your current HTML structure using CSS only. Here's an example:

input[type="radio"] {
  display: none;
}
input[type="radio"] + label {
  border: 5px solid lightblue;
  background-color: lightblue;
  cursor: pointer;
  display: block;
  height: 40px;
  width: 200px;
  text-align: center;
  line-height: 40px;
}
input[type="radio"]:checked + label {
  border: 5px solid blue;
  background-color: dodgerblue;
}

<input id="banana" type='radio' name="quiz" value="banana">
<label for="banana">Banana</label>
<input id="apple" type='radio' name="quiz" value="apple">
<label for="apple">Apple</label>
<input id="strawberry" type='radio' name="quiz" value="strawberry">
<label for="strawberry">Strawberry</label>
<input id="orange" type='radio' name="quiz" value="orange">
<label for="orange">Orange</label>

edited Mar 23, 2016 at 17:09

answered Mar 23, 2016 at 16:33

Dave

11k3 gold badges45 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Martin Over a year ago

PERFECT! I want everything to be centered, I tried adding text-align: center but it wasn't centering it!!!

Martin Over a year ago

It only centers the text in the box but I want to center the boxes as well.

Dave Over a year ago

There are a few different options for vertically aligning your test. I took the easy path since you know the height of the box and there's only one line of text. See update.

Fabio brunori · Accepted Answer · 2016-03-23 16:22:34Z

0

have no time to write code, i'll just try explain the idea:

create the desidered form with divs and text as if no checkbox should exist and implement with js the behavior

at the onClick of each div, change the css class adding "selected", for example, or removing it if present (that means that it was already selected)

not far to implement behavior for single choice

so you could have different appearance for selected item/s.

tip for single selection (one selected at time): in the onClick, if the div is already "selected", remove that class and nothing else (if u want to allow "no selection" mode or do nothing instead"); else remove from all the choicediv the "selected" class and add it to target of onClick.

myDiv.onclick = function(e) {
    if (e.target.classList.contains("selected")) {
        e.target.classList.remove("selected");
    } else {
        for (var i = 0; i < myChoicedivArray.length; i++) {
            myChoicedivArray.classList.remove("selected");
        }
        e.target.classList.add("selected");
    }
    //other onclick code here
}

disclaimer: i have no tested that code, it's just to give an idea

That's all.

answered Mar 23, 2016 at 16:22

Fabio brunori

284 bronze badges

2 Comments

Martin Over a year ago

I do not completely understand your point but I think I do in a way. Did you mean instead of creating the radio button through Javascript, I should've just put it in the HTML using div tags?

Fabio brunori Over a year ago

exactly, probably it's just simpler but it still a workaround

Collectives™ on Stack Overflow

Radio button style with javascript

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related