So I want to add local storage to this project but it's only saving the first 2 checkboxes, not all of them. I want to make a habit tracker and you are to check off the days you complete and so when you reload the page, the days you have completed a habit are checked off. so far I only have the basic layout of the page without the actual habit part or the styling. I'm trying to work on the checkbox part first.
Any help will be appreciated. Code is below:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Local Storage Test</title>
</head>
<body>
<!-- <p>Last Saved Item: <span id="saved">_____</span></p>
<input id="username" type="text"></input>
<button onclick="store()">Save</button>
<br><br>
<p id="confirm"></p> -->
<h2 id="Haading">Habbit Tracker</h2><br>
<div class="habbits">
<input type="text" placeholder="Enter A Habbit Here"><button class="add" onclick="add()">Add</button><br><br>
</div>
<div class="days">
<input onclick="save()" type="checkbox" id="Mon">Monday</input>
<br>
<input onclick="save()" type="checkbox" id="Tue">Tuesday</input>
<br>
<input onclick="save()" type="checkbox" id="Thu">Wednesday</input>
<br>
<input onclick="save()" type="checkbox" id="Fri">Thursday</input>
<br>
<input onclick="save()" type="checkbox" id="Sun">Friday</input>
<br>
<input onclick="save()" type="checkbox" id="Sat">Saturday</input>
<br>
<input onclick="save()" type="checkbox" id="Sun">Sunday</input>
</div>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
Javascript
function save(){
var checkbox1 = document.getElementById('Mon');
localStorage.setItem('monday', checkbox1.checked);
var checkbox2 = document.getElementById('Tue');
localStorage.setItem('tuesday', checkbox2.checked);
var checkbox3 = document.getElementById('Wed');
localStorage.setItem('wednesday', checkbox3.checked);
var checkbox4 = document.getElementById('Thu');
localStorage.setItem('thursday', checkbox4.checked);
var checkbox5 = document.getElementById('Fri');
localStorage.setItem('friday', checkbox5.checked);
var checkbox6 = document.getElementById('Sat');
localStorage.setItem('saturday', checkbox6.checked);
var checkbox7 = document.getElementById('Sun');
localStorage.setItem('sunday', checkbox7.checked);
}
function load(){
var checked1 = JSON.parse(localStorage.getItem('monday'));
document.getElementById("Mon").checked = checked1;
var checked2 = JSON.parse(localStorage.getItem('tuesday'));
document.getElementById("Tue").checked = checked2;
var checked3 = JSON.parse(localStorage.getItem('wednesday'));
document.getElementById("Wed").checked = checked3;
var checked4 = JSON.parse(localStorage.getItem('thursday'));
document.getElementById("Thu").checked = checked4;
var checked5 = JSON.parse(localStorage.getItem('friday'));
document.getElementById("Fri").checked = checked5;
var checked6 = JSON.parse(localStorage.getItem('saturday'));
document.getElementById("Sat").checked = checked6;
var checked7 = JSON.parse(localStorage.getItem('sunday'));
document.getElementById("Sun").checked = checked7;
}
load();
This ids for these 3 input fileds are wrong.
<input onclick="save()" type="checkbox" id="Thu">Wednesday</input>
<br>
<input onclick="save()" type="checkbox" id="Fri">Thursday</input>
<br>
<input onclick="save()" type="checkbox" id="Sun">Friday</input>
<br>
So you js code throws an error here:
document.getElementById("Wed").checked = checked3;
Change your html to:
<input onclick="save()" type="checkbox" id="Wed">Wednesday</input>
<br>
<input onclick="save()" type="checkbox" id="Thu">Thursday</input>
<br>
<input onclick="save()" type="checkbox" id="Fri">Friday</input>
<br>
and it will work
Related
I'm trying to get the background color of the button to change based on if a sessionStorage item is marked true. On the next page, the Kitchen page, when all the buttons are checked, the sessionStorage item becomes true so when you go back to the "home page",the kitchen is now marked green instead of red. This is the show completion. I think you can use jQuery but I don't really know how to use it.
Home
function loader(){
var form = document.getElementById("myForm");
//error somewhere in here
for(var i=0;i<form.length;i++){
if(sessionStorage.getItem(form.elements[i].value) == "true"){
document.getElementById(form.elements[i].value).style.backgroundColor = "green";
return true;
}else{
document.getElementById(form.elements[i].value).style.backgroundColor = "red";
return false;
}
}
}
function initial(){
if (localStorage.getItem("hasCodeRunBefore") === null) {
var form = document.forms[0];
var tot = document.forms[0].length;
var i;
for(var i = 0; i < tot ; ++i){
document.getElementById(form.elements[i].value).style.backgroundColor = "red";
}
localStorage.setItem("hasCodeRunBefore", true);
}
}
function start(){
initial();
loader();
}
Home HTML
<body onload="start()">
<header align=center>Home Screen</header>
<p align=center id="result"></p>
<script>
document.getElementById("result").innerHTML = sessionStorage.getItem("currentAddress");
</script>
<ul align=center>
<form id="myForm">
<li>
<input type="button" name="area" id="livingroom" value="Living Room" ><br><br>
<script type="text/javascript">
sessionStorage.setItem("livingroom","false");
document.getElementById("livingroom").onclick = function () {
location.href = "url";
};
</script>
</li>
<li>
<input type="button" name="area" id="kitchen" value="Kitchen"><br><br>
<script type="text/javascript">
sessionStorage.setItem("kitchen","false");
document.getElementById("kitchen").onclick = function () {
location.href = "url";
};
</script>
</li>
<li>
<input type="button" name="area" id="bathroom" value="Bathroom" ><br><br>
<script type="text/javascript">
sessionStorage.setItem("bathroom","false");
document.getElementById("bathroom").onclick = function () {
location.href = "url";
};
</script>
</li>
<li>
<input type="button" name="area" id="dining" value="Dining" ><br><br>
<script type="text/javascript">
sessionStorage.setItem("dining","false");
document.getElementById("dining").onclick = function () {
location.href = "url";
};
</script>
</li>
<li>
<input type="button" name="area" id="bedroom1" value="Bedroom 1" ><br><br>
<script type="text/javascript">
sessionStorage.setItem("bedroom1","false");
document.getElementById("bedroom1").onclick = function () {
location.href = "url";
};
</script>
</li>
</form>
</ul>
Kitchen
function checkTasks(form){
var count = 0;
for(var i=0;i<form.task.length;i++){
if(form.task[i].checked){
count++;
}
}
if(count == form.task.length){
sessionStorage.setItem("kitchen","true");
window.open("url");
}else{
alert("You have not completed all the tasks! Please check all the boxes to indicate you have completed the tasks. If there is an issue, write it in the other box.");
}
}
Kitchen HTML
<body>
<header align=center>Kitchen To Do List</header>
<form name="todolist" >
<div id="button">
<label>
<input type="checkbox" name="task" value="1" ><p>Microwave</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Coffee Maker</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Oven</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Dishwasher</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Stove Top</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Other</p>
</label>
</div>
<textarea id="other"></textarea><br><br>
<p align=center>
<input type="submit" name="box" id="box" value="Complete" onclick="checkTasks(this.form)">
</p>
</form>
<div class="close">
<form align=center action="url" target="_self">
<input type="submit" name="back" value="Back">
</form>
</div>
Every time you load the home page you are setting the value to false with those inline scripts. Remove the sessionStorage.setItem("livingroom","false"); calls in home.html and it looks like everything will work.
I am trying to calculate percentage and addition using JQuery. Addition can properly run but percentage calculation cannot. My code is below.
How can I change it and calculate the percentage?
index.php
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<br/><br />
<form id="jquery_percentage">
<label>Total Marks</label>
<input type="text" name="total_marks" id="total_marks"/>
<br/>
<br/>
<label>Written Marks</label>
<input type="text" name="written_marks" id="written_marks"/>
<br/>
<br/>
<label>Viva Marks</label>
<input type="text" name="viva_marks" id="viva_marks"/>
<br/>
<br/>
<label>Grooming Marks</label>
<input type="text" name="grom_marks" id="grom_marks"/>
<br/>
<br/>
<label>Obtain Marks</label>
<input type="text" name="obt_marks" id="obt_marks"/>
<br/>
<br/>
<label>Percentage Marks</label>
<input type="text" name="perc_marks" id="perc_marks"/>
<br/>
<br/>
<input type="button" name="submit" id="submit" value="Submit" />
</form>
<div id="return"></div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('#written_marks, #grom_marks, #viva_marks').change(function(){
var written_marks = parseFloat($('#written_marks').val()) || 0;
var grom_marks = parseFloat($('#grom_marks').val()) || 0;
var viva_marks = parseFloat($('#viva_marks').val()) || 0;
$('#obt_marks').val(written_marks + viva_marks + grom_marks);
});
</script>
<script>
$('#total_marks, #obt_marks').change(function(){
var total_marks = parseFloat($('#total_marks').val());
var obt_marks = parseFloat($('#grom_marks').val());
//var viva_marks = parseFloat($('#viva_marks').val()) || 0;
$('#perc_marks').val((obt_marks * 100) / total_marks);
});
</script>
You onChange event occurs when you actually go to the element and change its value. It doesn't trigger automatically if you are just changing it's value dynamically. In this case you have to trigger the event like this $("#obt_marks").trigger("change");. Check the snippet
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<br/><br />
<form id="jquery_percentage">
<label>Total Marks</label>
<input type="text" name="total_marks" id="total_marks" />
<br/>
<br/>
<label>Written Marks</label>
<input type="text" name="written_marks" id="written_marks" />
<br/>
<br/>
<label>Viva Marks</label>
<input type="text" name="viva_marks" id="viva_marks" />
<br/>
<br/>
<label>Grooming Marks</label>
<input type="text" name="grom_marks" id="grom_marks" />
<br/>
<br/>
<label>Obtain Marks</label>
<input type="text" name="obt_marks" id="obt_marks" />
<br/>
<br/>
<label>Percentage Marks</label>
<input type="text" name="perc_marks" id="perc_marks" />
<br/>
<br/>
<input type="button" name="submit" id="submit" value="Submit" />
</form>
<div id="return"></div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('#written_marks, #grom_marks, #viva_marks').change(function() {
var written_marks = parseFloat($('#written_marks').val()) || 0;
var grom_marks = parseFloat($('#grom_marks').val()) || 0;
var viva_marks = parseFloat($('#viva_marks').val()) || 0;
$('#obt_marks').val(written_marks + viva_marks + grom_marks);
$("#obt_marks").trigger("change");
});
</script>
<script>
$('#total_marks, #obt_marks').change(function() {
var total_marks = parseFloat($('#total_marks').val());
var obt_marks = parseFloat($('#obt_marks').val());
//var viva_marks = parseFloat($('#viva_marks').val()) || 0;
$('#perc_marks').val((obt_marks * 100) / total_marks);
});
</script>
I have a quiz with values that are added to a sum which determines the image displayed but is only showing me my raw .js file when I click submit. I am hosting it and am not sure why it is showing me this. The previous function in the file work, since the validation works and is found in that file.
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="Kenneth Dunn" />
<meta name="description" content="" />
<link rel="stylesheet" href="css/random.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="logo">
<h1>Overwatch</h1>
</div>
<div id="content">
<h2 align="center">Overwatch Quiz</h2>
<p>
Hi there! This quiz is dedicated to one of my favorite games Overwatch!
</p>
<form action="js/random.js" method="post" name="quiz_form" onsubmit="owchar()">
<p>
<br>
<input id='fName' name "first_name" type="text" placeholder="First Name" onblur="this.placeholder='First Name'" onfocus="this.placeholder='Use only letters'" class="validate" />
<img width="45px" height="45px"src='img/Q.png' id="fNameImg" />
</p>
<p>
<br>
<input id="last_name" name="last_name" type="text" placeholder="Last Name" onblur="this.placeholder='Last Name'" onfocus="this.placeholder='Use only Letters'" class="validate"/>
<img width="45px" height="45px" src='img/Q.png' id="last_nameImg" />
</p>
<p>
<br>
<input id="email" name="email" type="email" placeholder="Email" onblur="this.placeholder='Email'" onfocus="this.placeholder='Must contain # '" class="validate" />
<img width="45px" height="45px" src='img/Q.png' id="emailImg" />
</p>
<p>
<br>
<input id='phone' name="number" type="tel" placeholder="Phone Number" onblur="this.placeholder='Phone Number'" onfocus="this.placeholder='Must follow xxx-xxx-xxx '" class="validate" />
<img width="45px" height="45px" src='img/Q.png' id="phoneImg" />
</p>
<p>
<br>
<input id='sulley' name="sulley" type="sulley" placeholder="Sulley Email" onblur="this.placeholder='Sulley Email Address'" onfocus="this.placeholder='Must contain ~ and https:// '" class="validate"/>
<img width="45px" height="45px" src='img/Q.png' id="sulleyImg" />
</p>
<br>
<br>
<p>
<h2>Find out which Overwatch character you are most like!</h2>
<p>If you could pick what form to take in a fictional universe with magic and cool science what would you want to be?</p>
<input type="radio" name="exist" value="1">Male(Human).
<br>
<input type="radio" name="exist" value="2">Female(Human).
<br>
<input type="radio" name="exist" value="3">An Animal or something crazy.
<p>What is your preferred weapon to take on bad guys and defend yourself?</p>
<input type="radio" name="weapon" value="1">Twin Shotguns for close range.
<br>
<input type="radio" name="weapon" value="2">Twin pistols medium range.
<br>
<input type="radio" name="weapon" value="3">An electro gun that schocks enemies into submission.
<p>Which motivations most align with your own?
<p>
<input type="radio" name="idea" value="1">To become more powerful and to defeat those who would oppose me.
<br>
<input type="radio" name="idea" value="2">To explore the world and discover the unknown.
<br>
<input type="radio" name="idea" value="3">To protect my friends and those I care about.
<p>What do you look like?</p>
<input type="radio" name="look" value="1">Dark and mysterious black-hooded figure ,very edgy, like people in the Matix.
<br>
<input type="radio" name="look" value="2">Short and spunky British airforce pilot who can travel back in time.
<br>
<input type="radio" name="look" value="3">I'm a large gorilla who likes to eat bananas and peanut butter and can sheild my friends from harm.
<br>
<br>
<input type="submit" value="Submit">
<input type="reset" name="reset" id="reset" value="Reset" />
</p>
</form>
<br>
<br>
<br>
<br>
<h2 align="center" >Congratulations you got...</h2>
<div id="character" align="center" height="499" width="281" >
<img src="" id="character"/>
<br>
<br>
<br>
</div>
<div id="footer">
<h2 align="center">Created by Kenneth Dunn </h2>
</p>
</div>
</div>
</div>
<script src="js/random.js" type="text/javascript"></script>
</body>
</html>
JS
function validateData() {
console.log(this);
var letters = /^[A-Za-z]+$/;
var email = [#];
var tel = /^\d{3}-\d{3}-\d{4}$/gm;
var sulley = /[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]/;
var imgId = this.id + 'Img';
var img = document.getElementById(imgId);
console.log(img)
var valid = false;
if (this.type == 'text') {
if (this.value.match(letters)) {
valid = true;
}
}
if (this.type == 'email') {
if (this.value.match(email)) {
valid = true;
}
}
if (this.type == 'tel') {
if (this.value.match(tel)) {
valid = true;
}
}
if (this.type == 'sulley') {
if (this.value.match(sulley)) {
valid = true;
}
}
if (valid) {
img.src = "img/check.png";
} else {
img.src = "img/redx.png";
}
}
var els = document.getElementsByClassName("validate");
for(i=0 ; i<els.length ; i++){
els[i].addEventListener("change", validateData, false);
}
function owchar(){
var sum = 0;
var w = document.forms["quiz_form"]["exist"].value;
sum+=w;
var q = document.forms["quiz_form"]["weapon"].value;
sum+=q;
var r = document.forms["quiz_form"]["idea"].value;
sum+=r;
var g = document.forms["quiz_form"]["look"].value;
sum+=g;
if (sum>1 && sum<6){
document.getElementById("character").src="img/reaper.png";
return false;
}
else if (sum>6 && sum<9){
document.getElementById("character").src="img/tracer.jpeg";
return false;
}
else {
document.getElementById("character").src="img/winston.png";
return false;
}
}
Your form is defined as:
<form action="js/random.js" method="post" name="quiz_form" onsubmit="owchar()">
The action tells the browser where to go after submission, not what js file to look in. Javascript uses a shared global scope, meaning that all JS files use the same global scope, even ones built directly into the page. Because of this Javascript awesomeness -- or weirdness (depending on your views) -- you don't need to specify where the code is that you want to run, you just have to load the code (using a <script> tag).
TL;DR;
Change this line so that it looks like the following example:
<form name="quiz_form" onsubmit="owchar()">
new to stack overflow here. My question is what I might have done wrong with this quiz reset button? I have it set so that if the reset button is clicked at the end of the quiz, the quiz should return to the first question. However, the button is doing nothing. I was thinking I may have variable scope issues but I tried to accommodate for that and I still can't get the reset button to work. Thanks in advance.
HTML:
<html>
<head>
<title>Hello...</title>
</head>
<body>
<h1 id="theTitle" class="highlight summer">BATMAN QUIZ!</h1>
<div id="mainContent">
<div id="question">
</div>
<div id="choices">
<input type="radio" name="choices" /><label id="choice1" class="radios"></label></br>
<input type="radio" name="choices" /><label id="choice2" class="radios"></label></br>
<input type="radio" name="choices" /><label id="choice3" class="radios"></label></br>
<input type="submit" id="submitButton" value="Submit" /></br>
<input type="submit" class="hidden" id="nextButton" value="Next Question" />
</div>
<div class="hidden" id="answer">
</div>
</div>
</body>
</html>
CSS:
.hidden{
display:none;
}
.visible{
display:inline;
}
JavaScript:
var questionArray = [
["What is Batman's first name?", "Bruce Wayne"],
["What city does Batman live in?", "Gotham"],
["What is Commisioner Gordon's daughter's name?", "Barbara"]
];
var choicesArray = [
["Bruce Wayne", "Clark Kent", "Charles Xavier"],
["Metropolis", "Starling City", "Gotham"],
["Helen", "Barbara", "Jean"]
]
i = 0;
theQuiz(i);
function theQuiz(i) {
if (i < questionArray.length) {
var score = 0;
document.querySelector("#question").textContent = questionArray[i][0];
document.querySelector("#answer").textContent = "The correct answer is: " + questionArray[i][1];
document.querySelector("#choice1").textContent = choicesArray[i][0];
document.querySelector("#choice2").textContent = choicesArray[i][1];
document.querySelector("#choice3").textContent = choicesArray[i][2];
var answer = document.querySelector("#answer");
var submitButton = document.querySelector("#submitButton")
submitButton.addEventListener("click", showAnswer, false);
var nextButton = document.querySelector("#nextButton")
nextButton.addEventListener("click", nextQuestion, false);
function showAnswer() {
answer.classList.add("visible");
nextButton.classList.add("visible");
};
function nextQuestion() {
answer.classList.remove("visible");
nextButton.classList.remove("visible");
i++;
theQuiz(i);
};
} else {
document.body.textContent = "Game Over!";
var restartButton = document.createElement("input")
restartButton.type = "submit";
restartButton.value = "Play Again!"
document.body.appendChild(restartButton);
i=0;
theQuiz(i);
restartButton.addEventListener("click", resetGame, true);
function resetGame() {
i = 0;
theQuiz(0);
};
}
};
If you want to refresh the whole page: location.reload();
If you want to reset just where you are at on the quiz:
Wrap the whole quiz in a <form> and add this <input type='reset'> that's it.
Added and changed the following:
Required
button#fullReset and EventListeneradded
#mainContent into a <form>
<input type='reset'>added
Recommended
#choices to a <fieldset>
#theTitle inside <legend>
#answer into a <input type='hidden'>
Specification
id on <label> are useless, follow this pattern:
<label for='rad1'>Radio 1</label>
<input id='rad1' name='rads'>
Either <br> or <br/> never </br>
SNIPPET
<html>
<head>
<title>Hello...</title>
</head>
<body>
<form id="mainContent">
<fieldset id="choices">
<legend>
<h1 id="theTitle" class="highlight summer">BATMAN QUIZ!</h1>
</legend>
<input type="radio" name="choices" />
<label id="choice1" class="radios"></label>
<br>
<input type="radio" name="choices" />
<label id="choice2" class="radios"></label>
<br>
<input type="radio" name="choices" />
<label id="choice3" class="radios"></label>
<br>
<input type="submit" id="submitButton" value="Submit" />
<br>
<input type="submit" class="hidden" id="nextButton" value="Next Question" />
<input type="hidden" id="answer">
<input type='reset'>
<button id='fullReset'>Full Reset</button>
</fieldset>
</form>
<script>
var fullReset = document.getElementById('fullReset');
fullReset.addEventListener('click', function(e) {
location.reload();
}, false);
</script>
</body>
</html>
I am making a questionnaire and am not brilliant with JS. I want to take the results of the radio buttons which have been marked, so either True or False, and then show them on another page. I have the questions in a form.
CODE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styling/style.css">
<title>1</title>
</head>
<body>
<script>
function sendclick() {
var answers = [document.forms["questionarre"]["clickRule"].value,
document.forms["questionarre"]["404error"].value,
document.forms["questionarre"]["colour"].value,
document.forms["questionarre"]["H2Tag"].value,
document.forms["questionarre"]["SiteMap"].value,
document.forms["questionarre"]["heading"].value,
document.forms["questionarre"]["alttag"].value,
document.forms["questionarre"]["UseAgain"].value];
var count = 0
for (var i = 0; i<answers.length; i++) {
if (answers[i] == "") {
var temp = i+1;
alert("Please complete question "+temp);
break;
}
count++;
}
if (count == answers.length) {
var correct = [document.getElementById("correct1").checked,
document.getElementById("correct2").checked,
document.getElementById("correct3").checked,
document.getElementById("correct4").checked,
document.getElementById("correct5").checked,
document.getElementById("correct6").checked];
//window.open("YourResults.html", "_self")
}
}
/*
for (var i = 0; i<x.length; i++) {
if (x[i] == "") {
var temp = i+1;
// alert("results"+x)//window.open("results"+x);
break;}
}
}function - sendClick end
function opener() {
var text = document.getElementById('correct7').value;
var target = {
non text content : alert("correct")
};
if (text in targetNames) {
window.open(targetNames[text]);
}
}
document.getElementById('name').addEventListener('keyup', opener, false);
*/
</script>
<div id="questionarre_bg">
<form name="questionarre" action="" method="post">
<div id="Question1">
<p class="thicker">How many clicks do developers use to keep the user close to information? </p>
<input type="radio" name="clickRule" value=1>1<br>
<input type="radio" name="clickRule" value=4>4
<input type="radio" name="clickRule" id="correct1" value=3>3<br>
<input type="radio" name="clickRule" value=6>6
</div>
<div id="Question2">
<p class="thicker">How are developers using the 404 Error Page, for keep the users happy?</p>
<input type="radio" name="404error" id="correct2" value="Including links">Including links<br>
<input type="radio" name="404error" value="displaying a video">displaying a video<br>
<input type="radio" name="404error" value="playing music">playing music<br>
</div>
<div id="Question3">
<p class="thicker">Should you rely on colour alone in a website build?</p>
<input type="radio" name="colour" value="Yes">Yes<br>
<input type="radio" name="colour" id="correct3" value="No">No
</div>
<div id="Question4">
<p class="thicker">A H2 Tag is useful for?</p>
<input type="radio" name="H2Tag" id="correct4" value="The disabled autoreaders">The disabled autoreaders<br>
<input type="radio" name="H2Tag" value="Pretty webpages">Pretty webpages<br>
</div>
<div id="Question5">
<p class="thicker" >What is correct name given to page of the websites pages?</p>
<input type="radio" name="SiteMap" value="Tube Map">Tube Map
<input type="radio" name="SiteMap" id="correct5" value="Site Map">Site Map <br>
<input type="radio" name="SiteMap" value="Map">Map
<input type="radio" name="SiteMap" value="Page List">Page List
</div>
<div id="Question6">
<p class="thicker">A webpage heading should do what?</p>
<input type="radio" name="heading" id="correct6" value="Tell the user about the content in a few words">Tell the user about the content in a few words<br>
<input type="radio" name="heading" value="include meaningless text">include meaningless text<br>
<input type="radio" name="heading" value="Be short">Be short<br>
</div>
<div id="Question7">
<p class="thicker">The Alt tag is used for what....</p>
<input type="text" name="alttag" id="correct7" ><br><!--ANSWER__non text content-->
</div>
<div id="Question8">
<p class="thicker">Would you use this website again for information?</p>
<input type="radio" name="UseAgain" value="Yes">Yes<br>
<input type="radio" name="UseAgain" value="No">No<br>
<textarea rows="4" cols="50"></textarea>
</div>
</form>
<button onclick="sendclick()">send</button>
</div>
</div>
</body>
</html>
you could pass the answer through local storage
it would be something like this
//save the info on page 1
//resultArr will be the array holding all the radio results,
//you could get them by jQuery or any other method to you are comfortable with
localStorage.setItem("answers", answers);
// Retrieve the info on page 2
document.getElementById("answer1").innerHTML = localStorage.getItem("answers")[0];
you can read more about it here:
http://www.w3schools.com/html/html5_webstorage.asp