Jump to content
Sign in to follow this  
Kaila

Radio Html Outputs

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? 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...