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>
Related
I have questions array in which I want to add HTML form data when I hit the submit button in the format as shown below:
var questions = [
new Question("What language are we learning today?", ["Java", "C#","C++", "JavaScript"], "JavaScript"),
new Question("Which language is used for styling web pages?", ["HTML", "JQuery", "CSS", "XML"], "CSS")
];
HTML form that I have created
<form action="" method="post" >
<label>Enter question:</label>
<input type="text" id="question" name="question" /><br/>
<label>Option1:</label>
<input type="text" id="option1" name ="option1"/><br/>
<label>Option2:</label>
<input type="text" id="option2" name ="option2"/><br/>
<label>Option3:</label>
<input type="text" id="option3" name ="option3"/><br/>
<label>Option4:</label>
<input type="text" id="option4" name ="option4"/><br/>
<label>Enter answer</label>
<input type="text" id="answer" name="answer" /><br/>
<input type="submit" name="submit" value="Add quiz" />
</form>
So, I want to add data into array like this: new question("question?",["option1","option2","option3","option4"],"answer")
You can do it like this:
function Question (pquestion, poptions, panswer) {
this.question = pquestion;
this.options = poptions;
this.answer = panswer;
}
var questions = [
new Question("What language are we learning today?", ["Java", "C#","C++", "JavaScript"], "JavaScript"),
new Question("Which language is used for styling web pages?", ["HTML", "JQuery", "CSS", "XML"], "CSS")
];
function addQuestion() {
var question = document.getElementById("qs").value;
var option1 = document.getElementById("option1").value;
var option2 = document.getElementById("option2").value;
var option3 = document.getElementById("option3").value;
var option4 = document.getElementById("option4").value;
var answer = document.getElementById("answer").value;
var numberOfQuestions = questions.length;
questions[numberOfQuestions] = new Question(question, [option1, option2, option3, option4], answer);
alert("Thank you. We now have " + questions.length + " questions.");
}
<head>
<title>test</title>
</head>
<body>
<form>
<label>Enter question:</label>
<input type="text" id="qs" name="qs" /><br/>
<label>Option1:</label>
<input type="text" id="option1" name ="option1"/><br/>
<label>Option2:</label>
<input type="text" id="option2" name ="option2"/><br/>
<label>Option3:</label>
<input type="text" id="option3" name ="option3"/><br/>
<label>Option4:</label>
<input type="text" id="option4" name ="option4"/><br/>
<label>Enter answer</label>
<input type="text" id="answer" name="answer" /><br/>
<input type="button" name="submit" onclick="addQuestion();" value="Add quiz" />
</form>
</body>
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 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()">
I used the top answer to this question to build a form that feeds into a sheet along with file upload. Now I've hit another wall.
I have categories, and sub-categories. I'd like the sub-categories to only show up IF their parent category has been selected. I just can't figure out A) where I need to put the code (on our website it's right in with the HTML), I've tried putting it in the HTML file and the Code.gs file, or B) if the code I'm using is even right.
Here's the form - the "Co-Op Category" is the parent categories, I have hidden divs for each category that would hold the 'child categories'
HTML:
<script>
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput(resultHtml) {
toggle_visibility('inProgress');
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = resultHtml;
}
// From blog.movalog.com/a/javascript-toggle-visibility/
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<div id="formDiv">
<!-- Form div will be hidden after form submission -->
<form id="myForm">
Name: <input name="name" type="text" /><br/>
Co-Op Amount: <input name="amount" type="text" /><br/>
Co-Op Split:<br />
<input type="radio" name="split" value="100%">100%<br>
<input type="radio" name="split" value="50/50">50/50<br>
<input type="radio" name="split" value="75/25">75/25<br>
Other: <input type="text" name="split" /><br />
Reason for Co-Op: <input name="reason" type="text" cols="20" rows="5" /><br />
Brand:
<select name="brand">
<option>Select Option</option>
<option>Bluebird</option>
<option>Brown</option>
<option>Ferris</option>
<option>Giant Vac</option>
<option>Honda</option>
<option>Hurricane</option>
<option>Little Wonder</option>
<option>RedMax</option>
<option>SCAG</option>
<option>Snapper Pro</option>
<option>Sno-Way</option>
<option>SnowEx</option>
<option>Wright</option>
<option>Ybravo</option>
</select><br/>
Co-Op Category:<br />
<input type="radio" name="category" id="dealer" value="Dealer Advertising">Dealer Advertising<br />
<input type="radio" name="category" id="online" value="Digital/Online Marketing">Digital/Online Advertising<br />
<input type="radio" name="category" id="meetings" value="Meetings and Schools">Meetings and Schools<br />
<input type="radio" name="category" id="advertising" value="PACE Advertising">PACE Advertising<br />
<input type="radio" name="category" id="pricing" value="Program Pricing Promotions">Program Pricing Promotions<br />
<input type="radio" name="category" id="correspondence" value="PACE-to-Dealer Correspondence">PACE-to-Dealer Correspondence<br />
Other: <input type="text" id="other" name="category" /><br />
<div class="dealer box" style="display: none;">DEALER</div>
<div class="online box" style="display: none;">ONLINE</div>
<div class="meetings box" style="display: none;">MEETINGS</div>
<div class="advertising box" style="display: none;">ADVERTISING</div>
<div class="pricing box" style="display: none;">PRICING</div>
<div class="correspondence box" style="display: none;">CORRESPONDENCE</div>
Email: <input name="email" type="text" /><br/>
Message: <textarea name="message" style="margin: 2px; height: 148px; width: 354px;"></textarea><br/>
School Schedule (Image Files Only): <input name="myFile" type="file" /><br/>
<input type="button" value="Submit"
onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
google.script.run
.withSuccessHandler(updateOutput)
.processForm(this.parentNode)" />
</form>
</div>
<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Uploading. Please wait...
</div>
<div id="output">
<!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>
Code.gs:
var submissionSSKey = '1zzRQwgXb0EN-gkCtpMHvMTGyhqrx1idXFXmvhj4MLsk';
var folderId = "0B2bXWWj3Z_tzTnNOSFRuVFk2bnc";
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate();
}
function processForm(theForm) {
var fileBlob = theForm.myFile;
var folder = DriveApp.getFolderById(folderId);
var doc = folder.createFile(fileBlob);
// Fill in response template
var template = HtmlService.createTemplateFromFile('Thanks.html');
var name = template.name = theForm.name;
var amount = template.amount = theForm.amount;
var split = template.split = theForm.split;
var reason = template.reason = theForm.split;
var brand = template.brand = theForm.brand;
var category = template.category = theForm.category;
var message = template.message = theForm.message;
var email = template.email = theForm.email;
var fileUrl = template.fileUrl = doc.getUrl();
// Record submission in spreadsheet
var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 9).setValues([[name,amount,split,reason,category,brand,message,email,fileUrl]]);
// Return HTML text for display in page.
return template.evaluate().getContent();
}
//Toggle Secondary Categories
function(){
$('input[type="radio"]').click(function(){
if($(this).attr("id")=="dealer"){
$(".box").not(".dealer").hide();
$(".dealer").show();
}
if($(this).attr("id")=="online"){
$(".box").not(".online").hide();
$(".online").show();
}
if($(this).attr("id")=="advertising"){
$(".box").not(".advertising").hide();
$(".advertising").show();
}
if($(this).attr("id")=="pricing"){
$(".box").not(".pricing").hide();
$(".pricing").show();
}
if($(this).attr("id")=="correspondence"){
$(".box").not(".correspondence").hide();
$(".correspondence").show();
}
if($(this).attr("id")=="meetings"){
$(".box").not(".meetings").hide();
$(".meetings").show();
}
if($(this).attr("id")=="other"){
$(".box").not(".other").hide();
$(".other").show();
}
});
};
This bit specifically is where I'm having trouble:
//Toggle Secondary Categories
function(){
$('input[type="radio"]').click(function(){
if($(this).attr("id")=="dealer"){
$(".box").not(".dealer").hide();
$(".dealer").show();
}
if($(this).attr("id")=="online"){
$(".box").not(".online").hide();
$(".online").show();
}
if($(this).attr("id")=="advertising"){
$(".box").not(".advertising").hide();
$(".advertising").show();
}
if($(this).attr("id")=="pricing"){
$(".box").not(".pricing").hide();
$(".pricing").show();
}
if($(this).attr("id")=="correspondence"){
$(".box").not(".correspondence").hide();
$(".correspondence").show();
}
if($(this).attr("id")=="meetings"){
$(".box").not(".meetings").hide();
$(".meetings").show();
}
if($(this).attr("id")=="other"){
$(".box").not(".other").hide();
$(".other").show();
}
});
};
The unexpected token is due to the function(){ line, which is invalid syntax for the jQuery document ready function. You should have:
$(function(){
$('input[type="radio"]').click(function(){
...
});
});
With that fixed, your next error will be:
Uncaught ReferenceError: $ is not defined
That's because you haven't included jQuery, which is what the $ symbol is referring to in statements like $(this). You'll want to read this for more tips about using jQuery in Google Apps Script. The short story, though: You need to add the following, adjusted for whatever version of jQuery you intend to use:
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
Updated Form.html, which shows the appropriate <div> as you intended. It also includes the recommended doctype, html, head and body tags:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput(resultHtml) {
toggle_visibility('inProgress');
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = resultHtml;
}
// From blog.movalog.com/a/javascript-toggle-visibility/
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//Toggle Secondary Categories
$(function() {
$('input[type="radio"]').click(function() {
if ($(this).attr("id") == "dealer") {
$(".box").not(".dealer").hide();
$(".dealer").show();
}
if ($(this).attr("id") == "online") {
$(".box").not(".online").hide();
$(".online").show();
}
if ($(this).attr("id") == "advertising") {
$(".box").not(".advertising").hide();
$(".advertising").show();
}
if ($(this).attr("id") == "pricing") {
$(".box").not(".pricing").hide();
$(".pricing").show();
}
if ($(this).attr("id") == "correspondence") {
$(".box").not(".correspondence").hide();
$(".correspondence").show();
}
if ($(this).attr("id") == "meetings") {
$(".box").not(".meetings").hide();
$(".meetings").show();
}
if ($(this).attr("id") == "other") {
$(".box").not(".other").hide();
$(".other").show();
}
});
});
</script>
<div id="formDiv">
<!-- Form div will be hidden after form submission -->
<form id="myForm">
Name:
<input name="name" type="text" /><br/>
Co-Op Amount: <input name="amount" type="text" /><br/>
Co-Op Split:<br />
<input type="radio" name="split" value="100%">100%<br>
<input type="radio" name="split" value="50/50">50/50<br>
<input type="radio" name="split" value="75/25">75/25<br> Other: <input type="text" name="split" /><br /> Reason for Co-Op: <input name="reason" type="text" cols="20" rows="5" /><br />
Brand:
<select name="brand">
<option>Select Option</option>
<option>Bluebird</option>
<option>Brown</option>
<option>Ferris</option>
<option>Giant Vac</option>
<option>Honda</option>
<option>Hurricane</option>
<option>Little Wonder</option>
<option>RedMax</option>
<option>SCAG</option>
<option>Snapper Pro</option>
<option>Sno-Way</option>
<option>SnowEx</option>
<option>Wright</option>
<option>Ybravo</option>
</select><br/>
Co-Op Category:<br />
<input type="radio" name="category" id="dealer" value="Dealer Advertising">Dealer Advertising<br />
<input type="radio" name="category" id="online" value="Digital/Online Marketing">Digital/Online Advertising<br />
<input type="radio" name="category" id="meetings" value="Meetings and Schools">Meetings and Schools<br />
<input type="radio" name="category" id="advertising" value="PACE Advertising">PACE Advertising<br />
<input type="radio" name="category" id="pricing" value="Program Pricing Promotions">Program Pricing Promotions<br />
<input type="radio" name="category" id="correspondence" value="PACE-to-Dealer Correspondence">PACE-to-Dealer Correspondence<br />
Other: <input type="text" id="other" name="category" /><br />
<div class="dealer box" style="display: none;">DEALER</div>
<div class="online box" style="display: none;">ONLINE</div>
<div class="meetings box" style="display: none;">MEETINGS</div>
<div class="advertising box" style="display: none;">ADVERTISING</div>
<div class="pricing box" style="display: none;">PRICING</div>
<div class="correspondence box" style="display: none;">CORRESPONDENCE</div>
Email: <input name="email" type="text" /><br/>
Message: <textarea name="message" style="margin: 2px; height: 148px; width: 354px;"></textarea><br/>
School Schedule (Image Files Only): <input name="myFile" type="file" /><br/>
<input type="button" value="Submit" onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
google.script.run
.withSuccessHandler(updateOutput)
.processForm(this.parentNode)" />
</form>
</div>
<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Uploading. Please wait...
</div>
<div id="output">
<!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>
</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