cuatomize radio input with "fonts.googleapis"

Question

Good morning. Improving this code I found it difficult to insert a custom radio with fonts.googleapis to show after the quiz verification function. Something like the attached image Do you have any suggestions? or better yet an example of code.... heartfelt thanks to the community, I wish you a good day to all and happy coding

var answers = ["1b"];
var rads, quiz; // need to be set after load
window.addEventListener("load",function() { // when page loads
  quiz = document.getElementById("quiz");
  rads = quiz.querySelectorAll("input[type=radio]"); // all radios in the quiz
  document.getElementById("scoreButton").addEventListener("click",function(e) { // on click of scoreme
    var score = 0;
    for (var i=0;i<rads.length;i++) { // loop over all radios in the form
      var rad = rads[i];
      var idx = rad.name.substring(1)-1; //remove the q from the name - JS arrays start at 0
      var checked = rad.checked;
      var correct = rad.value==answers[idx];
      
      if (correct) {
        rad.closest("label").classList.toggle("correct");
      }  
      else if (checked) {
        rad.closest("label").classList.toggle("error")
      }  
    }
  });  
});

.correct {
  color: green;
  font-weight: bold;
  text-decoration: underline;
  border-left: 2px solid green;
}
.error {
  color: red;
  font-weight: bold;
  text-decoration: line-through;
  border-left: 2px solid red;
  }

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<form id="quiz">

<div class="questions">
<dl id="1">

    <dd><b>1. QUESTION.</b><br>
      <label><input type="radio" name="q1" value="1a"> 1. WRONG</label><br>
      <label><input type="radio" name="q1" value="1b"> 2. RIGHT</label><br>
      <label><input type="radio" name="q1" value="1c"> 3. WRONG</label>
    </dd>
</dl>

  <input type="button" value="RESULT" id="scoreButton"> 
</div>
</form>

I'm trying to customize the radio input in the easiest way possible! — Antonio Tito, Feb 05 '22 at 09:04
**I have done that** (icon replaces the default radio input) too try my answer once more — Neptotech -vishnu, Feb 06 '22 at 06:10

Neptotech -vishnu · Answer 1 · 2022-02-06T06:08:50.510

var answers = ["1b", "1c"];
var rads, quiz, cur, par;// need to be set after load
var ShowAnswer = true; // Try false
window.addEventListener("load", function() {
  // when page loads
  quiz = document.getElementById("quiz");
  rads = quiz.querySelectorAll("input[type=radio]"); // all radios in the quiz
  document
    .getElementById("scoreButton")
    .addEventListener("click", function(e) {
      // on click of scoreme
      cur = quiz.querySelector("input[type=radio]:checked");
      par = cur.parentNode;
      var score = 0;
      for (var i = 0; i < rads.length; i++) {
        // loop over all radios in the form
        var rad = rads[i];
        var idx = rad.name.substring(1) - 1; //remove the q from the name - JS arrays start at 0
        var checked = rad.checked;
        var correct = !(answers.indexOf(cur.getAttribute("value")) == -1);
        rad.style.appearance = 'none';
        document.getElementById("scoreButton").style.display = 'none';
        
        if (!(answers.indexOf(rad.getAttribute('value')) == -1) && ShowAnswer) {
          rad.parentNode.classList.add("correct");
          rad.parentNode.innerHTML =
            `<span class="material-icons-round correct c">check</span>` +
            rad.parentNode.innerHTML;

        }
        if (correct) {
          par.classList.add("correct");
          par.innerHTML =
            `<span class="material-icons-round correct c">check</span>` +
            par.innerHTML;
        } else if (checked) {
          par.classList.add("error");
          par.innerHTML =
            `<span class="material-icons-round error e">close</span>` +
            par.innerHTML;
        }
      }
      
    });
});

.correct {
  color: green;
  font-weight: bold;
  text-decoration: underline;
}

.c {
  text-decoration: none;
  border-left: 0px;
  margin-left: -24px;
  /*From https://fonts.googleapis.com/icon?family=Material+Icons+Round*/
}

.error {
  color: red;
  font-weight: bold;
  text-decoration: line-through;
}

.e {
  text-decoration: none;
  border-left: 0px;
  margin-left: -24px;
  /*From https://fonts.googleapis.com/icon?family=Material+Icons+Round*/
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
<form id="quiz">

  <div class="questions">
    <dl id="1">

      <dd><b>1. QUESTION.</b><br>
        <label><input type="radio" name="q1" value="1a"> 1. WRONG</label><br>
        <label><input type="radio" name="q1" value="1b"> 2. RIGHT</label><br>
        <label><input type="radio" name="q1" value="1c"> 3. WRONG But shown as right due to value in js</label>
      </dd>
    </dl>

    <input type="button" value="RESULT" id="scoreButton">
  </div>
</form>

Here is a PEN

Edited with replacement of choose option hiding!

You are brilliant! Thank you... it would be perfect if the icon replaces the default radio input... I will study your code. I think well need to insert in the html and customize.....Any suggestions? — Antonio Tito, Feb 05 '22 at 10:47
@AntonioTito [Try it from here](https://stackoverflow.com/questions/34286322/remove-border-circle-from-radio-input), but take it as home work , for now for this question it's enough I think — Neptotech -vishnu, Feb 05 '22 at 12:49
@AntonioTito sorry i can't help out about that,you can search for hiding option to choose in StackOverflow, **get a hint from** `appearance:none` in css... — Neptotech -vishnu, Feb 05 '22 at 12:51
@AntonioTito **I have done that** (icon replaces the default radio input) too try it please! — Neptotech -vishnu, Feb 06 '22 at 06:10

cuatomize radio input with "fonts.googleapis"

1 Answers1

Here is a PEN

Edited with replacement of choose option hiding!