'How to make my choices appear as a block?

I don't know how to edit my block of possible answers for an interactive quiz that I created in JavaScript. I don't know how to call "choices" in my CSS file to style the website as I want. I'm really new to HTML.


function renderQuestion() {
  quiz = get("quiz");

  get("quiz_status").innerHTML = "Question " + (position + 1) + " of " + questions.length;

  question = questions[position].question;
  chA = questions[position].a;
  chB = questions[position].b;
  chC = questions[position].c;
  chD = questions[position].d;
  //Add local var to hold uri
  img = questions[position].img;

  quiz.innerHTML = "<h3></h3>";
  
  //Add <img> element to DOM with source
  quiz.innerHTML += "<img src=\"" + img + "\"><br>";

  quiz.innerHTML += "<label> <input type='radio' name='choices' value='a'> " + chA + "</label><be>";
  quiz.innerHTML += "<label> <input type='radio' name='choices' value='b'> " + chB + "</label><be>";
  quiz.innerHTML += "<label> <input type='radio' name='choices' value='c'> " + chC + "</label><be>";
  quiz.innerHTML += "<label> <input type='radio' name='choices' value='d'> " + chD + "</label><br><be>";
  quiz.innerHTML += "<button onclick='showPrevious()'>&#8678 Question</button>";
  quiz.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
  quiz.innerHTML += "<button onclick='showNext()'>Question &#8680</button>";
}
window.addEventListener("load", renderQuestion);


Solution 1:[1]

CSS is based on "selectors" to specify what you want to style. There are several ways to narrow down the inputs in your case.

By element

/* all inputs */
input {
  color: blue;
}

/* inputs inside labels */
label input {
  color: blue;
}

By attribute

input[name=choices] {
  color: blue;
}

I would recommend using classes (a special attribute that css utilizes)

If you add a class to the inputs like this:

quiz.innerHTML += "<label> <input type='radio' class='pretty-choice' name='choices' value='a'> " + chA + "</label><be>";

your css selector needs to be "dot" plus the class name

.pretty-choice {
  color: blue;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 IrkenInvader