Jump to content

Radio Html Outputs


Kaila
 Share

Recommended Posts

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? 

Link to comment
Share on other sites

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 by JMRKER
Link to comment
Share on other sites

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 by JMRKER
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...