You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If users want to create a web-based version of their server, rather than make it require a server with server-side logic for advancing to questions, we could implement entirely w/ JS, making it easier for end-user to test and/or give them more flexibility.
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Survey</title><style>
.question {display: none;}
.question.active {display: block;}
.hidden {display: none;}</style></head><body><formid="surveyForm"><divid="q1"class="question active"><p>Question 1: What is your favorite color?</p><inputtype="radio"name="color"value="red"id="colorRed"><labelfor="colorRed">Red</label><br><inputtype="radio"name="color"value="blue"id="colorBlue"><labelfor="colorBlue">Blue</label><br><inputtype="radio"name="color"value="green"id="colorGreen"><labelfor="colorGreen">Green</label><br><buttontype="button"onclick="nextQuestion(2)">Next</button></div><divid="q2"class="question"><p>Question 2: What is your favorite animal?</p><inputtype="radio"name="animal"value="dog"id="animalDog"><labelfor="animalDog">Dog</label><br><inputtype="radio"name="animal"value="cat"id="animalCat"><labelfor="animalCat">Cat</label><br><inputtype="radio"name="animal"value="bird"id="animalBird"><labelfor="animalBird">Bird</label><br><buttontype="button"onclick="nextQuestion(3)">Next</button></div><divid="q3"class="question"><p>Question 3: Do you like pizza?</p><inputtype="radio"name="pizza"value="yes"id="pizzaYes"><labelfor="pizzaYes">Yes</label><br><inputtype="radio"name="pizza"value="no"id="pizzaNo"><labelfor="pizzaNo">No</label><br><buttontype="button"onclick="nextQuestion(4)">Next</button></div><divid="q4"class="question hidden"><p>Question 4: What is your favorite pizza topping?</p><inputtype="text"name="topping"id="topping"><br><buttontype="button"onclick="nextQuestion(5)">Next</button></div><divid="q5"class="question"><p>Thank you for completing the survey!</p><buttontype="submit">Submit</button></div></form><script>
function nextQuestion(questionNumber) {varcurrentQuestion=document.querySelector('.question.active');currentQuestion.classList.remove('active');varnextQuestion=document.getElementById('q'+questionNumber);// Skip logic: Show question 4 only if 'yes' is selected for question 3if(questionNumber===4){var pizzaAnswer =document.querySelector('input[name="pizza"]:checked');if(pizzaAnswer&&pizzaAnswer.value==='yes'){nextQuestion.classList.remove('hidden');}else{nextQuestion(questionNumber+1);return;}}nextQuestion.classList.add('active');}</script></body></html>
The text was updated successfully, but these errors were encountered:
If users want to create a web-based version of their server, rather than make it require a server with server-side logic for advancing to questions, we could implement entirely w/ JS, making it easier for end-user to test and/or give them more flexibility.
The text was updated successfully, but these errors were encountered: