How can I use the CSS hidden property to redirect to a new page?

Question

so I've coded a questionnaire and I'm running into an issue. When a user clicks submit the questionnaire the results are displayed near the submit button I was hoping for them to be redirected to a new page (where results are displayed) by using the CSS hidden property, but I don't understand how I can do that and also for

Accepted Answer

If we store your results in its own variable, we then have 2 options right off the bat.var results = `Correct answers: ${correct}`; Easiest way would be to display it in an alert function, let the browser handle it.alert(results);Another way would be to spawn your own window and edit the html contents of it.var resultsWin = window.open("about:blank", "Questionnaire Results", "width=200,height=100");resultsWin.document.write(results);Keep in mind that the opening of the window will not work in the snippet due to this:js:253 Blocked opening 'about:blank' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.The reason for the undefined was because your appending of the answers was using the inside for loop j but it existed in just the outer one, with no access to jI went ahead and replaced it to this:x.innerHTML += `

${ourQuestions[i].correctAnswer}

`; function buttonClicked(button) { button.style.visibility = 'hidden'; startSurvey(); console.log('Survey started.');}function startSurvey() { var i, j, k; for (i = 0; i < ourQuestions.length; i++) { document.getElementById('questions').innerHTML += '

'; } document.getElementById('questions').innerHTML += '';}var ourQuestions = [{ question: 'While naturally occurring wildfires can benefit ecosystems, unnatural blazes started by uncaring and negligent humans can do great harm and cause many deaths. What percentage of wildfires do you think are started by humans?', answers: { a: '10-15%', b: '85-90%', c: '45-50%', d: '25-30%', }, correctAnswer: 'b', }, { question: 'If you have lit a campfire before, how did you extinguish it?', answers: { a: 'I did not extinguish it and waited for it to die on its own', b: 'I extinguished the campfire with a bucket of water and made sure it was fully extinguished.', c: 'I have never lit a campfire before.', d: 'uhhh', }, correctAnswer: 'b', }, { question: 'What are the two most common reasons that forest fires start?', answers: { a: 'Lightning and human negligence', b: 'Spontaneous combustion and erosion', c: 'Animals igniting flames and overcrowded bushlands', d: 'Strong Wind Patterns', }, correctAnswer: 'a', }, { question: 'What time of the year do most forest fires occur?', answers: { a: 'Summer', b: 'Spring', c: 'Fall', d: 'Winter', }, correctAnswer: 'a', }, { question: 'How fast do you think forest fires spread?', answers: { a: '10.8 km/h', b: '6.4 km/h', c: '22.2 km/h', d: '3.2 km/h', }, correctAnswer: 'a', }, { question: 'What do forest fires need in order to burn?', answers: { a: 'Water', b: 'High humidity', c: 'Fuel', d: 'Clear weather', }, correctAnswer: 'c', }, { question: 'What is one of the main toxic gases present in forest fire smoke?', answers: { a: 'Osmium tetroxide', b: 'Disulfur decafluoride', c: 'Tungsten hexafluoride ', d: 'carbon monoxide', }, correctAnswer: 'd', }, { question: 'What natural disasters could be caused as a consequence of a destructive forest fire?', answers: { a: 'Erosion, flash flooding and landslides', b: 'Tornadoes', c: 'Snow', d: 'Tsunami and earthquakes', }, correctAnswer: 'a', }, { question: 'What major factor determines a forest fire’s behaviour?', answers: { a: 'Amount of water vapour in air', b: 'Density of Forests', c: 'Wind', d: 'Hours of sunlight', }, correctAnswer: 'c', }, { question: 'What 3 things are needed to start a fire?', answers: { a: 'Matches, oxygen, wood', b: 'Air and sunlight', c: 'Fuel, heat, oxygen', d: 'Fuel, oxygen, wood', }, correctAnswer: 'c', }, { question: 'Which one of these is NOT a type of forest fire?', answers: { a: 'Crown', b: 'Firework', c: 'Surface', d: 'Ground ', }, correctAnswer: 'b', }, { question: 'What was the cause of the Amazon forest fires in 2019?', answers: { a: 'Deforestation for agriculture usage', b: 'Fireworks', c: 'Unattended campfire', d: 'Arson', }, correctAnswer: 'a', }, { question: 'Which one of these names are NOT an alternate name for forest fires?', answers: { a: 'Wildfires', b: 'Shrub fires', c: 'Natural fireworks', d: 'Brushfires ', }, correctAnswer: 'c', }, { question: 'How many forest fires occurred in 2019?', answers: { a: '25 653', b: '50 477', c: '45 809', d: '89 431', }, correctAnswer: 'b', },];function solveSurvey() { var x; var txt = ' '; var i = 0; var correct = 0; for (i = 0; i < document.forms.length; i++) { x = document.forms[i]; for (j = 0; j < x.length; j++) { if (x[j].checked) { correctAnswer = ourQuestions[i].correctAnswer; if (x[j].value == ourQuestions[i].answers[correctAnswer]) { correct += 1; } } } x.innerHTML += `

${ourQuestions[i].correctAnswer}

`; } //document.getElementById('questions').innerHTML += 'Correct answers: ' + correct; var results = `Correct answers: ${correct}`; // Easiest way would be to display it in an alert function, let the browser handle it. alert(results); // Another way would be to spawn your own window and edit the html contents of it. var resultsWin = window.open("about:blank", "Questionnaire Results", "width=200,height=100"); resultsWin.document.write(results);} Forest Firefighters: Questionnaire

Image Source: https://phys.org/news/2019-11-countries-forest.html

Advertisement

Answer