JS Checkboxes Quiz help!

1

I am doing a quiz which is different from the usual multiple choice answers where one is required to just click on an answer.

This quiz is different in the sense that a checkbox is ticked next to some corresponding texts/words. A running total is then added up where both a numeric as well as percentage score are then given.
There are about 20 units covering different areas of knowledge, and some of them are a couple or so hundreds.

I would like to link and record all the scores across the 20 units/modules as well an overall score to be linked to a candidate, and also be able to retrieve the results at a later date, included what are ticked and not ticked. As I’ve mentioned prior. Some units have over a hundred checkboxes. In each module/units of the test, I Would like to be able to randomise the test for it to pick out about 15 or so from each checkbox list modules/units list and populate as the test of each module begins and progresses across the test as a whole.

It would also be great if i could assign special values/attribute to some of the checkboxes lists, so a certain portion/percentage of them must be included in the populated randomised list that’s generated.

I have laid out below some snippets of codes of three of the test modules, namely Schools, Vets and Dental Surgeries. I would be eternally grateful if anyone is able to modify them accordingly to achieve what I am after, some of what I am after, or near what I am after, as it may give me some starting points.

I am still relatively new to most, if not all things Javascript etc. All my codes for each module/units are in 20 separate files. So, a lot of repetitive codings. I can’t help thinking that there must be a much more efficient way I could have coded things.

Please excuse the pasting in of the long coding

Thanks in advance for any help are suggestions given

Schools

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Schools: Knowledge Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <style type="text/css">


  /* Header Section */
 header {
      background-color: #D3D3D3;
      text-align: center;
      width: 100%;
      position: fixed;
      height: 160px;
      top: 0px;
    }
    body{
      font-family: Arial;
      background-image: url("images/school.jpg"), url("images/school2.jpg"), url("images/school3.jpg"), url("images/school4.jpg");
      background-size: 75%;
    }
  

#stats-div {

  float: right;
  background-color: lightblue;
  width: 400px;
  margin-top: -110px;
  margin-right: 25px;
  padding: 10px;
}
/*****************/
body {
  margin: 0px;
  margin-top: 0px;
}

    #wrapper {
    	margin: 0 auto;
    	border: 5px solid #000;
    	border-radius: 5px;
    	width: 900px;
    	text-align: center;
    	overflow: scroll;
    	padding: 20px 0;
      height: auto;
      margin-top: 200px;

    }

    #q-wrapper {
    	margin: 10px auto;
    	background-color: lightblue;
    	width: 800px;
    	border-radius: 3px;
    	padding: 10px 0px;
      height: auto;

    }

    form {
    	margin-top: 30px;
    	text-align: left;
    	width: 800px;
      height: auto;
      overflow: auto;

    }

    h1, h2, h3 {
    	margin: 10px 0px;
    }

    input[type=checkbox] {
   /* transform: scale(2.5); Causes super imposed problem with fixed/static header when scrolling up*/
    padding: 0px;
    margin: 0px;
    width: 30px;
    height: 18px;
}
}

    .q-texts {
    	font-size: 20px;
    	color: #000;
    	margin: 15px;
    }

    #result {
    	font-weight: bold;
    	color: #000;
    	font-size: 20px;
    }

    </style>

  </head>
  <body onload="toTalQuestions()">
  <header>
  <h1>City Council</h1>
  <h2>Locations Knowledge Mock Test:</h2>
  <h3>Schools</h3>

    <div id="stats-div">
    <div id="result">Score = <span id="selected">0</span></div>  <div id="notchecked">Remaing Questions or Not Answered = <span id="unselected"></span></div> 
    <!-- Counting only worked after JS code was moved from the 'head' tag to the bottom of the body tag -->
    <div id="num-of-questions">Total Amount Of Question = <span id="totalquestions"></span></div>
    <div><strong>Score Percentage</strong> <span id="score-perc" style="color: green; font-size: 1.5em;"></span> <strong>%</strong></div>
    <div id="perScoreDiv">
    </div>

 <input type="button" id="tick-all-btn" onclick="checkAll2()" class="btn btn-link" value="Tick All Answers">
 <input type="button" onclick="uncheckAll2()" class="btn btn-link" value="Reset Test">
</div>
</header>

<div id="wrapper">
<div id="q-wrapper">

<form>
  <h6>Infants</h6>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Churchdown Infant School: Station Rd (Churchdon)</label><br>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Longlevens Infant School: Paygrove Ln</label><br>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Tredworth Infant School: Victory Rd</label><br>

  <h6>Juniors</h6>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Churchdown Villiage Junior school: Station Rd (Churchdon)</label><br>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">St James Junior (C Of E): Upton St</label><br>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Longlevens Junior School: Church Rd</label><br>

<h6>Primaries</h6>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Finlay Community Primary School: Finlay Rd</label><br>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Beech Green Primary School: St James (Quedgeley)</label><br>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">St Paul’s Primary School (C of E): New St</label><br>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Linden Primary School: Linden Rd</label><br>

<h6>Seniors</h6>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Sir Thomas Rich’s School: Oakleaze</label><br>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Holmleigh High School (Formerly Beaufort Academy): Holmleigh Rd</label><br>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Ribston Hall High School: Stroud Rd</label><br>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">St Peter’s High School: Stroud Rd</label><br>

<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Churchdown School Academy: Winston Rd</label><br>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Chosen Hill School: Brookfield Rd</label><br>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">The Crypt School: Podsmead Rd</label><br>
<h6>Faith Schools</h6>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Al-Ashraf Primary School and Nursery: Stratton Rd</label><br>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Al-Ashraf Secondary School: Sinope St</label><br>
<h6>Steiner Schools</h6>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Wynstone School: Church Ln (Whaddon)</label><br>
<h6>PRUs</h6>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">Russett House: Russett Cl</label><br>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">The Raikes Centre: Horton Rd</label><br>
<h6>Misc</h6>
<h6>Private</h6>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">The King's School: Pitt St</label><br>
<input type="checkbox" class="check2" name="schools" /><label class="q-texts">OneSchool Campus (AKA Focus School): Eastbrook Rd</label><br>

</form>

</div>


</div>

<script>

// Score Percentage
function percentage() {
        var totalqs = document.getElementById('totalquestions').innerText
        var correct =  document.getElementById('selected').innerText
        scoreperc = (correct / totalqs); // Adjusted from original (http://forum.freecodecamp.org/t/nan-result-instead-of-percentage/299950)
        document.getElementById("score-perc").innerHTML = Math.round(scoreperc * 100) // Adjusted from original

      }

// Count Checked
const selectedElm = document.getElementById('selected');

function showChecked(){
  selectedElm.innerHTML = document.querySelectorAll('input[name=schools]:checked').length;
  percentage(); // Trigers call to the "percentage" function to either increment/decrement score percentage when a checkbox is either ticked or unticked
}

document.querySelectorAll("input[name=schools]").forEach(i=>{
 i.onclick = () => showChecked();
});


// Reset test and Check all checkboxes

//v2 Tick all Checkboxes
function checkAll2() {
  var inputs = document.querySelectorAll('.check2');
  for(var i = 0; i < inputs.length; i++) {
    inputs[i].checked = true;
  }
}

// Untick All Checkboxes
function uncheckAll2() {
  var inputs = document.querySelectorAll('.check2');
  for(var i = 0; i < inputs.length; i++) {
    inputs[i].checked = false;
  }
}


// Count Unticked boxes
$(function () {
    $("input:checkbox").on("change", function () {
        var lenghtOfUnchecked = $('input:checkbox:not(:checked)').length;

        var unticked = document.getElementById('unselected').innerHTML = lenghtOfUnchecked;

    });
});	

// Amount Of Checkboxe Questions
function toTalQuestions() {
  var toTalQuestions = document.getElementsByName('schools').length;
  document.getElementById('totalquestions').innerHTML = toTalQuestions;
}

 </script>

</body>
</html>

Dental Surgeries

<!DOCTYPE html>
<!-- Has streets ouside boudary in csv -->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dental Surgeries: Knowledge Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <style type="text/css">


  /* Header Section */
 header {
      background-color: #D3D3D3;
      text-align: center;
      width: 100%;
      position: fixed;
      height: 160px;
      top: 0px;
    }
    body{
      font-family: Arial;
    }
  

#stats-div {

  float: right;
  background-color: lightblue;
  width: 400px;
  margin-top: -110px;
  margin-right: 25px;
  padding: 10px;
}
/*****************/
body {
  margin: 0px;
  margin-top: 0px;
}

    #wrapper {
    	margin: 0 auto;
    	border: 5px solid #000;
    	border-radius: 5px;
    	width: 900px;
    	text-align: center;
    	overflow: scroll;
    	padding: 20px 0;
      height: auto;
      margin-top: 200px;

    }

    #q-wrapper {
    	margin: 10px auto;
    	background-color: lightblue;
    	width: 800px;
    	border-radius: 3px;
    	padding: 10px 0px;
      height: auto;

    }



    form {
    	margin-top: 30px;
    	text-align: left;
    	width: 800px;
      height: auto;
      overflow: auto;

    }

    h1, h2, h3 {
    	margin: 10px 0px;
    }

    input[type=checkbox] {
   /* transform: scale(2.5); Causes super imposed problem with fixed/static header when scrolling up*/
    padding: 0px;
    margin: 0px;
    width: 30px;
    height: 18px;
}
}

    .q-texts {
    	font-size: 20px;
    	color: #000;
    	margin: 15px;
    }

    #result {
    	font-weight: bold;
    	color: #000;
    	font-size: 20px;
    }

    </style>

  </head>
  <body onload="toTalQuestions()">
  <header>
  <h1>City Council</h1>
  <h2>Locations Knowledge Mock Test:</h2>
  <h3>Dental Surgeries</h3>

    <div id="stats-div">
    <div id="result">Score = <span id="selected">0</span></div>  <div id="notchecked">Remaing Questions or Not Answered = <span id="unselected"></span></div> 
    <!-- Counting only worked after JS code was moved from the 'head' tag to the bottom of the body tag -->
    <div id="num-of-questions">Total Amount Of Question = <span id="totalquestions"></span></div>
    <div><strong>Score Percentage</strong> <span id="score-perc" style="color: green; font-size: 1.5em;"></span> <strong>%</strong></div>
    <div id="perScoreDiv">
    </div>

 <input type="button" id="tick-all-btn" onclick="checkAll2()" class="btn btn-link" value="Tick All Answers">
 <input type="button" onclick="uncheckAll2()" class="btn btn-link" value="Reset Test">
</div>
</header>

<div id="wrapper">
<div id="q-wrapper">

<form>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Abbeymead Dental Care: Abbeymead Ave</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Genix Healthcare Dental Clinic: Lister House (Station Rd)</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Roseville House Dental Practice:  Hucclecote Rd</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Bupa Dental Care Gloucester: Stroud Rd</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Bupa Dental Care Gloucester: Painswick Rd</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Bupa Dental Care Gloucester Westgate: Three cocks Ln</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">My Dentist: Eastgate House (Eastgate St)</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Gloucester Dental Care: London Rd</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Acorn Dental Surgery: Barnwood Rd</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Affinity Dental Care: Cheltenham Rd</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">NHS Dental Access Centre: Kimbrose Way</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Clarence House Deantal Health Centre: Clarence St</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Cotteswold House Dental Care: Cotteswold Rd</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Messenger Dental Practice: Messenger House (St Michael Square)</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">The Limes Dental Practice: Stroud Rd</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Norfolk House Dental Care: London Rd</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Courtlands Dental Surgery: Painswick Rd</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Phoenix Orthodontics: Clarence St</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">The Community Dental: Kimbrose Hotel Commercial Rd</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Dept Oral Maxillofacial & Orthodontics: GRH (Great Western Rd</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Quedgeley House Dental Practice: Space Park (Olympus Park)</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">St James Dental: St James (Quedgeley)</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">Windsor Drive Dental Practice: Windsor Dr</label><br>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">White Clinic Teeth Whitening In Gloucester: Westgate St</label><br>


<h3>Further Afield</h3>
<input type="checkbox" class="check2" name="dentists" /><label class="q-texts">St Johns Dental Surgery: Johns Ave (Churchdown)</label><br>




</form>

</div>


</div>

<script>


// Score Percentage
function percentage() {
        var totalqs = document.getElementById('totalquestions').innerText
        var correct =  document.getElementById('selected').innerText
        scoreperc = (correct / totalqs); // Adjusted from original (http://forum.freecodecamp.org/t/nan-result-instead-of-percentage/299950)
        document.getElementById("score-perc").innerHTML = Math.round(scoreperc * 100) // Adjusted from original

      }



// Count Checked
const selectedElm = document.getElementById('selected');

function showChecked(){
  selectedElm.innerHTML = document.querySelectorAll('input[name=dentists]:checked').length;
  percentage(); // Trigers call to the "percentage" function to either increment/decrement score percentage when a checkbox is either ticked or unticked
}

document.querySelectorAll("input[name=dentists]").forEach(i=>{
 i.onclick = () => showChecked();
});



// Reset test and Check all checkboxes

//v2 Tick all Checkboxes
function checkAll2() {
  var inputs = document.querySelectorAll('.check2');
  for(var i = 0; i < inputs.length; i++) {
    inputs[i].checked = true;
  }
}

// Untick All Checkboxes
function uncheckAll2() {
  var inputs = document.querySelectorAll('.check2');
  for(var i = 0; i < inputs.length; i++) {
    inputs[i].checked = false;
  }
}


// Count Unticked boxes
$(function () {
    $("input:checkbox").on("change", function () {
        var lenghtOfUnchecked = $('input:checkbox:not(:checked)').length;

        var unticked = document.getElementById('unselected').innerHTML = lenghtOfUnchecked;

    });
});	

// Amount Of Checkboxe Questions
function toTalQuestions() {
  var toTalQuestions = document.getElementsByName('dentists').length;
  document.getElementById('totalquestions').innerHTML = toTalQuestions;
}


 </script>


</body>
</html>

VETS


<!DOCTYPE html>
<!-- Has streets ouside boudary in csv -->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vetinary Surgeries: Knowledge Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <style type="text/css">


  /* Header Section */
 header {
      background-color: #D3D3D3;
      text-align: center;
      width: 100%;
      position: fixed;
      height: 160px;
      top: 0px;
    }
    body{
      font-family: Arial;
    }
  

#stats-div {

  float: right;
  background-color: lightblue;
  width: 400px;
  margin-top: -110px;
  margin-right: 25px;
  padding: 10px;
}
/*****************/
body {
  margin: 0px;
  margin-top: 0px;
}

    #wrapper {
    	margin: 0 auto;
    	border: 5px solid #000;
    	border-radius: 5px;
    	width: 900px;
    	text-align: center;
    	overflow: scroll;
    	padding: 20px 0;
      height: auto;
      margin-top: 200px;

    }

    #q-wrapper {
    	margin: 10px auto;
    	background-color: lightblue;
    	width: 800px;
    	border-radius: 3px;
    	padding: 10px 0px;
      height: auto;

    }



    form {
    	margin-top: 30px;
    	text-align: left;
    	width: 800px;
      height: auto;
      overflow: auto;

    }

    h1, h2, h3 {
    	margin: 10px 0px;
    }

    input[type=checkbox] {
   /* transform: scale(2.5); Causes super imposed problem with fixed/static header when scrolling up*/
    padding: 0px;
    margin: 0px;
    width: 30px;
    height: 18px;
}
}

    .q-texts {
    	font-size: 20px;
    	color: #000;
    	margin: 15px;
    }

    #result {
    	font-weight: bold;
    	color: #000;
    	font-size: 20px;
    }

    </style>

  </head>
  <body onload="toTalQuestions()">
  <header>
  <h1>Gloucester City Council</h1>
  <h2>Hackney Carriage Mock Test:</h2>
  <h3>Vetinary Suegeries</h3>

    <div id="stats-div">
    <div id="result">Score = <span id="selected">0</span></div>  <div id="notchecked">Remaing Questions or Not Answered = <span id="unselected"></span></div> 
    <!-- Counting only worked after JS code was moved from the 'head' tag to the bottom of the body tag -->
    <div id="num-of-questions">Total Amount Of Question = <span id="totalquestions"></span></div>
    <div><strong>Score Percentage</strong> <span id="score-perc" style="color: green; font-size: 1.5em;"></span> <strong>%</strong></div>
    <div id="perScoreDiv">
    </div>

 <input type="button" id="tick-all-btn" onclick="checkAll2()" class="btn btn-link" value="Tick All Answers">
 <input type="button" onclick="uncheckAll2()" class="btn btn-link" value="Reset Test">
</div>
</header>

<div id="wrapper">
<div id="q-wrapper">

<form>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">Vets4Pets: Barnwood Rd</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">Hucclecote Pets & Vets: Hucclecote Rd (AAS)</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">Quedgeley Vetinary Surgery: Bristol Rd (Quedgeley) (AAS)</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">Hucclecote Rd: Horseshoe Dr</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">SPA Veterniary Service: Painswick Rd</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">SPA Veterniary Service: School Ln (Quedgeley)</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">Woods Vetinary Group Animal  Hospital: Bristol Rd (Quedgeley)</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">Woods Vetinary Group Animal  Hospital: Windermere Rd</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">Companion Care Vets: Woodrow Way (Inside Pets At Home)</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">Simply Pets: Horton Rd</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">The Brambles Vetinary Surgery: Barnwood Rd</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">Abbeydale Animal Hospital: Glevum Way</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">Abbeydale Vetinary Surgery: Glevum Way (AAS)</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">British Small Animal Veterinary Association: Telford Way (BSAVA)</label><br>
<h3>Further Afield</h3>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">The Brambles Vetinary Surgery (Churchdown): Albermarle Rd</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">The Brambles Vetinary Surgery (Brockworth): Green St</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">The Brambles Vetinary Surgery (Churchdown): Albermarle Rd</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">Arvonia Vets Churchdown Vetinary Centre: Cheltenham Rd East (Churchdown)</label><br>
<input type="checkbox" class="check2" name="vets" /><label class="q-texts">Kingsway Vetinary Clinic: Kingsway Local Centre</label><br>



</form>

</div>


</div>

<script>


// Score Percentage
function percentage() {
        var totalqs = document.getElementById('totalquestions').innerText
        var correct =  document.getElementById('selected').innerText
        scoreperc = (correct / totalqs); // Adjusted from original (http://forum.freecodecamp.org/t/nan-result-instead-of-percentage/299950)
        document.getElementById("score-perc").innerHTML = Math.round(scoreperc * 100) // Adjusted from original

      }



// Count Checked
const selectedElm = document.getElementById('selected');

function showChecked(){
  selectedElm.innerHTML = document.querySelectorAll('input[name=vets]:checked').length;
  percentage(); // Trigers call to the "percentage" function to either increment/decrement score percentage when a checkbox is either ticked or unticked
}

document.querySelectorAll("input[name=vets]").forEach(i=>{
 i.onclick = () => showChecked();
});



// Reset test and Check all checkboxes

//v2 Tick all Checkboxes
function checkAll2() {
  var inputs = document.querySelectorAll('.check2');
  for(var i = 0; i < inputs.length; i++) {
    inputs[i].checked = true;
  }
}

// Untick All Checkboxes
function uncheckAll2() {
  var inputs = document.querySelectorAll('.check2');
  for(var i = 0; i < inputs.length; i++) {
    inputs[i].checked = false;
  }
}


// Count Unticked boxes
$(function () {
    $("input:checkbox").on("change", function () {
        var lenghtOfUnchecked = $('input:checkbox:not(:checked)').length;

        var unticked = document.getElementById('unselected').innerHTML = lenghtOfUnchecked;

    });
});	

// Amount Of Checkboxe Questions
function toTalQuestions() {
  var toTalQuestions = document.getElementsByName('vets').length;
  document.getElementById('totalquestions').innerHTML = toTalQuestions;
}


 </script>


</body>
</html>
3

Thanks Randell.

I know this, but I need more experience and learning before I am able to do such efficient wonder.

Thanks for bringing to my attention that I posted in wrong forum. I’ve now posted in the one you’ve said

4

First real issue you have? None of your checkboxes have a value attribute, so checking them is meaningless.

Second, when you say “save the results”, are you talking about on the local computer (using localStorage), or a back end system of some sort? Are you thinking have the results emailed to you and save them that way?

6

A backend will be most likely in the end, but willing to experiment with all three options. All these will be steep learning curves for me. At the moment everything on my desktop mac, but I sometimes upload them to a folder on an external server for testing.

7

Thanks, will try and get some creative juices in my thinking going

8

I might suggest you break it down to smaller pieces.

  1. What stuff is not repeated from quiz to quiz? The quiz data, it seems to me, is the dynamic part. If at all possible, that should be pulled out and stored elsewhere.
  2. What elements are fairly static? The header information (other than the particular quiz title), the stats block in the header, stuff like that can all be coded into a pretty static web page. Still, assign classes we can use to hook into later.
  3. What DOM elements will need to be created dynamically? The questions and question categories on the quiz will need to be created on the fly, as the number of either will vary from one quiz to another.
  4. How can we get that dynamic information, and using that, create the dynamic elements? Once we have them, how can we insert them into the page where we want them?
  5. How can we listen to events on those dynamic elements? Here’s a hint - listen at the nearest static container, instead.

A hint on the first question, you’ll likely want a way to save JSON on the server - whether in a database, or in a static text file. I’ve actually set up a repl just to play with this (and lemme tell you, this is kind of *fun!), and the first JSON file (which I’ve named schools.json) looks like this, to start:

{
  "title": "Schools",
  "categories": [
    {
      "category": "Infants",
      "questions": [
        {
          "name": "Churchdown Infant School: Station Rd (Churchdon)",
          "value": "CIS:SR"
        },
        {
          "name": "Longlevens Infant School: Paygrove Ln",
          "value": "LIS:PL"
        },
        {
          "name": "Tredworth Infant School: Victory Rd",
          "value": "TIS:VR"
        }
      ]
    }, {
      // Many more categories and questions, but you get the idea.
    }
  ]
}

Now what has that done for us? All the quizzes you have follow the same format. The only parts that change are the title, the categories of checkboxes, and the checkboxes themselves. So, rather than having three separate quizzes built in the same way, we have one quiz template, and three (or however many we might want) sets of quiz data, all of which we can flow into that template.

10

Here’s how it could look. The template is exactly the same, I simply use different JSON data to make each page.

https://rybotsquestioncheckboxesfcc.tobiasparent.repl.co/?quiz=dental-surgeries

https://rybotsquestioncheckboxesfcc.tobiasparent.repl.co/?quiz=schools

https://rybotsquestioncheckboxesfcc.tobiasparent.repl.co/?quiz=veterinarians

The only bit that changes is the quiz parameter, which tells me which JSON file to load, and from that, we can build a custom form.

Of course, this still hasn’t answered your “how can I save the test results” question…

Note that some of that may look a little complicated, but the reality is: everything on that page is something you can learn through the FCC courses! Yaaay! :wink:

12

Thank you very much for your help. Sorry I disappeared off the radar for a bit. I will certainly looking into your solutions when I get some time, most likely after the holiday season, as I need to get a move-on with it.

In the mean time, I hope you and the other contributors are having, and continue to have a wonderful holiday season.

I can’t promised I won’t be back with more queries :slight_smile:

1 Like
13

The question was a good one, got me thinking, and I had a great time building a mockup of what I think you’re looking for. I’m always around, and almost always more than willing to answer questions.

Have a great holiday seaon, and look forward to hearing more great questions. :wink:

14

Hello again. I hope all is well

I’ve looked at your solutions in the URLs you posted above. Thanks once more for your help and efforts.
Is there any chance you could provide me with the individual files so I can see how they are connected and linked to create the interactions. It will help me to start things off without any mistakes etc. This will help me to recreate all 20 modules in the way you’ve done, before I tackle the other issue of getting things to be loaded into the page in a randomised way.

Also, what are the “value”: “CIS:SR”, value": “LIS:PL” and “value”: “TIS:VR”?

Am I right in assuming that they are some sort of unique value assignments?

Thanks again in advanced.

15

Well, the only linking, really, is the HTML page loads the javascript and the css. Then, depending on the URL given (specifically, the ?quiz=<category> bit on the end of the URL), we also load a specific JSON resource. That could be a JSON file, or a database API call, or something from the back end. I don’t know what resource you’re working from, so this was all “prototypal”.

As to the "value":"CIS:SR" etc, I wanted the value of each checkbox to be unique. Without that, you have no way of knowing which checkbox was checked. Could have used the name, rather than create an artificial value, but it seemed easier to read. Also, it demonstrated that, should your organization have internal codes for those locations, you could simply set the value to that.

Is this a work project? A school assignment? The code itself is all viewable via the browser (“view source”, for example), but you can also simply visit the repl and see the list of files used there: https://repl.it/@TobiasParent/RybotsQuestionCheckboxesFCC

17

Hi again.

Thanks you very much for those files. they will go a very long way in helping me. I will complete the remaining 20+ sections, then proceed from there on with other aspects regarding how the test will interact and randomly load a fixed numerical/proportion amount of each section the HTML page etc.

The answer to your question regarding the purpose for me doing this test. It’s a project I have taken the initiative upon myself to make, as a result of the current archaic way the test is currently done using paper. The idea is a tester/invigilator will sit at the screen and will call out the names of places to the candidate on the other side of the screen, of which the candidate will then be required to response verbally by saying which street names, roads or locations etc things are located. A tick will be done for those the candidate knows, but none for the ones which are not known.

Also, as mentioned previously. I would like to be able to type a candidate’s name as the test commences and having result linked to a candidate, as well as being able to track progressions/scores and grades etc across the modules/sections, and save candidates results and grades, once completed ,among other things, etc.

I appreciate this is quite a lot I am trying to do, but for now Will carry on creating the JSON files of all the info that’s needed. in the meantime, any steps, suggestions and stepping stones will be greatly appreciated.

I may take a few days for a response from me sometimes due to work and other commitments.

18

Hello again, Hope you are well.

Once more thank you so much for the enormous help. Please excuse me for falling off the radar for so long. Work commitment and other things have eaten up my time. Anyway, I am back in the zone and ready to take things hopefully to the next level. I would be grateful for any help or advice.

I’ve moved most of the static info from the HTML pages into respective JSON files. Some of the contents in these files ranges from 18 to over 325. I can send you small snippets of them if necessary, but if you still have those old files you kindly did for me, you could work from there or I will send you, as I still have your original saved.

I can go into the scrip.js you created and just change the (myQuizUrl) = any file and loads according. And it works like clockwork. I would like to be able to do the following if possible:

Have a (next) button etc, so when it’s clicked the next JSON quiz file is loaded instead of having to go into script.js and manually type in a different file. Able to type a candidate’s name prior to quiz commencing and have all ticked and un-ticked answers linked to a candidate, with answers and scores both in numeric and percentages form being stored for now in another JSON file for retrieval at later date necessary, but would like the scores and percentages to still be visible while test progresses as well as at the conclusion of the overall test with message displaying Congratulations if a candidate has passed or Failed if when fallen short of a passed. Randomise and pick out some fixed or percentages amount of respective contents from the JSON files to be loaded in as the test pulls up each unit of the quiz once the next button is clicked. I noticed that the percentage score tally up as the boxes are tick. However, the numeric score isn’t visible anymore.

There is a little bit more, but I will leave them out for now. I appreciate this is a very big ask, so if there are aspects you cannot assist with I will totally understand, but any help with whatever you can or signposting would be greatly appreciate as always