Radio Html Outputs

Kaila · July 21, 2020

Ok, I am new to html and javascript but I understand the context. I am currently working on creating an assessment where people will fill out their answers to the questions provided and I will receive the outputs to their answers.

I used radio html buttons that they can check. What I cannot find is how to gather the data that is captured from the questions being answered. From what I have researched, I will probably have to use some sort of Javascript code, but after the code how do I view the answers that others provided?

JMRKER · July 22, 2020

Welcome to the forums.

What you want to do is possible, but the devil is in the details.
What have you attempted to this point?
How many questions? Multiple choice or true/false?
Is this for a real grade or just a practice display for the user.

Sound what you are looking for is a "quiz". There are a ton of examples on the web.
Search with google using "javascript quiz" as a start. Modify for your needs.

Just for grins, this is the simplest response form I could come up with:

<!DOCTYPE html><html lang="en"><head>
<title> VERY Simple Quiz </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>
 ul { list-style-type: none; cursor: pointer; }
 dt { font-size: 1.1em; font-weight: bold; padding-left: 3em; }
 dd { margin-bottom: 2em; }
</style>

</head><body>

<h1>Very Simple Quiz</h1>
<!-- form onsubmit="return false" // for testing purposes only -->
<dl>
 <dt>1. What is today?</dt>
 <dd>
  <ul>
   <li><label><input type="radio" name="q1" value='Q1:Sun'>Sunday</input></label></li>
   <li><label><input type="radio" name="q1" value='Q1:Sat'>Saturday</input></label></li>
   <li><label><input type="radio" name="q1" value='Q1:None'>None of the above</input></label></li>
  </ul>
 </dd>

 <dt>2. Is today part of a weekend?</dt>
 <dd>
  <ul>
   <li><label><input type="radio" name="q2" value='Q2:Yes'>Yes</input></label></li>
   <li><label><input type="radio" name="q2" value='Q2:No'>No</input></label></li>
  </ul>
 </dd>

</dl>
<p> <button id="checkAns">Responses in console.log</button> </p>
<!-- /form // for testing only -->

<pre id='demo'>Your Responses
</pre>

<script>
console.clear();

function checkAnswers() {
  let sel = document.querySelectorAll('input[type="radio"]');
  for (let i=0; i<sel.length; i++) {
    if (sel[i].checked) {  // answers in console: #'s start a zero
      console.log(i,sel[i].value);
      document.getElementById('demo').innerHTML += `${i} : ${sel[i].value}<br>`;
    }
  }
}

function init() {
  document.getElementById('checkAns').addEventListener('click', checkAnswers);
} init();
</script>

</body></html>

Edited July 22, 2020 by JMRKER

Ingolme · July 23, 2020

A server-side language will be needed if you want to receive data from people filling out the form. Javascript would not be able to achieve it.

JMRKER · July 23, 2020

40 minutes ago, Ingolme said:

A server-side language will be needed if you want to receive data from people filling out the form. Javascript would not be able to achieve it.

Don't know if this is what the OP wants. His definitions are somewhat sparse.
Example code lets people see their selections only. Would need to add logic for correctness.
The display could be printed out (Ctrl-P) and submitted for evaluation to OP without a server,
but I'm with you, not recommended without some additional code.
But it is definitely short for a beginner example.

Edited July 23, 2020 by JMRKER

Sign In

Radio Html Outputs

Recommended Posts

Kaila

Link to comment

Share on other sites

JMRKER

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

JMRKER

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity