Develop Reference

how do I fix the score in my option quiz?

I have a problem with the option quiz, more precisely with the evaluation of the correct answers. I don't get a score and it still stays at 0. Thank you for your help.
function check(){
var question1 = document.getElementsByClassName("question1")[0];
var question2 = document.getElementsByClassName("question2")[0];
var question3 = document.getElementsByClassName("question3")[0];
var correct = 0;
if (question1 == "Červená, Zelená, Modrá") {
correct++;
}
if (question2 == "0, 255") {
correct++;
}
document.getElementById("number_correct").innerHTML = "Máš " + correct + " otázky/otázek správně.";
}
<form id="quiz">
<p style="font-weight: 900">V RGB modelu se jedná o jaké barvy?</p>
<input type="radio" id="mc" name="question1" value="Červená, Zelená, Modrá">Červená, Zelená, Modrá<br>
<input type="radio" id="mc" name="question1" value="Červená, Zelená, Žlutá">Červená, Zelená, Žlutá<br>
<input type="radio" id="mc" name="question1" value="Černá, Fialová, Modrá">Červená, Fialová, Modrá<br>
</form>
<br>
<form id="quiz">
<p style="font-weight: 900">RGB monitory jsou schopny regulovat jas na jaké stupnici?</p>
<input type="radio" id="mc" name="question2" value="0, 275">0, 275<br>
<input type="radio" id="mc" name="question2" value="0, 255">0, 255<br>
<input type="radio" id="mc" name="question2" value="50, 355">50, 355<br>
</form>
<br>
<form id="quiz">
<p style="font-weight: 900">Má každý bod určenou svou přesnou polohu?</p>
</form>
<br>
<input id="check-btn" type="button" value="Vyhodnotit test" onclick="check();">
<br>
<br>
<div id="number_correct"></div>

So, First, ids should unique. Remove all your id="mc".
Second. you need to get the value of the "Selected" option; Access using "input[name="question1"]:checked" and access value using "selectedOption.value".
See the snippet below:
function check(){
var question1 = document.querySelector('input[name="question1"]:checked');
var question2 = document.querySelector('input[name="question2"]:checked');
var question3 = document.querySelector('input[name="question3"]:checked');
var correct = 0;
if (question1 !=null && question1.value == "Červená, Zelená, Modrá") {
correct++;
}
if (question2 !=null && question2.value == "0, 255") {
correct++;
}
if (question3 !=null &&question3.value == "Ano") {
correct++;
}
document.getElementById("number_correct").innerHTML = "Máš " + correct + " otázky/otázek správně.";
}
<form id="quiz">
<p style="font-weight: 900">V RGB modelu se jedná o jaké barvy?</p>
<input type="radio" name="question1" value="Červená, Zelená, Modrá">Červená, Zelená, Modrá<br>
<input type="radio" name="question1" value="Červená, Zelená, Žlutá">Červená, Zelená, Žlutá<br>
<input type="radio"name="question1" value="Černá, Fialová, Modrá">Červená, Fialová, Modrá<br>
</form>
<br>
<form id="quiz">
<p style="font-weight: 900">RGB monitory jsou schopny regulovat jas na jaké stupnici?</p>
<input type="radio" name="question2" value="0, 275">0, 275<br>
<input type="radio" name="question2" value="0, 255">0, 255<br>
<input type="radio" name="question2" value="50, 355">50, 355<br>
</form>
<br>
<form id="quiz">
<p style="font-weight: 900">Má každý bod určenou svou přesnou polohu?</p>
<input type="radio" name="question3" value="Někdy ano, někdy ne">Někdy ano, někdy ne<br>
<input type="radio" name="question3" value="Ne">Ne<br>
<input type="radio" name="question3" value="Ano">Ano<br>
</form>
<br>
<input id="check-btn" type="button" value="Vyhodnotit test" onclick="check();">
<br>
<br>
<div id="number_correct"></div>

you have a couple of issues:
id's have to be unique.
you didn't specify any classes in your html
you need to get the 'value' of the input
you need to reference the correct index
function check(){
var question1 = document.querySelector('input[name="question1"]:checked');
var question2 = document.querySelector('input[name="question2"]:checked');
var question3 = document.querySelector('input[name="question3"]:checked');
//console.log(question1,question2,question3)
var correct = 0;
if (question1 != null && question1.value == "Červená, Zelená, Modrá") {
correct++;
}
if (question2 != null && question2.value == "0, 255") {
correct++;
}
if (question3 != null && question3.value == "Ano") {
correct++;
}
document.getElementById("number_correct").innerHTML = "Máš " + correct + " otázky/otázek správně.";
}
<form id="quiz">
<p style="font-weight: 900">V RGB modelu se jedná o jaké barvy?</p>
<input type="radio" class='question1' name="question1" value="Červená, Zelená, Modrá">Červená, Zelená, Modrá<br>
<input type="radio" class='question1' name="question1" value="Červená, Zelená, Žlutá">Červená, Zelená, Žlutá<br>
<input type="radio" class='question1' name="question1" value="Černá, Fialová, Modrá">Červená, Fialová, Modrá<br>
</form>
<br>
<form id="quiz">
<p style="font-weight: 900">RGB monitory jsou schopny regulovat jas na jaké stupnici?</p>
<input type="radio" class='question2' name="question2" value="0, 275">0, 275<br>
<input type="radio" class='question2' name="question2" value="0, 255">0, 255<br>
<input type="radio" class='question2' name="question2" value="50, 355">50, 355<br>
</form>
<br>
<form id="quiz">
<p style="font-weight: 900">Má každý bod určenou svou přesnou polohu?</p>
<input type="radio" class='question3' name="question3" value="Někdy ano, někdy ne">Někdy ano, někdy ne<br>
<input type="radio" class='question3' name="question3" value="Ne">Ne<br>
<input type="radio" class='question3' name="question3" value="Ano">Ano<br>
</form>
<br>
<input id="check-btn" type="button" value="Vyhodnotit test" onclick="check();">
<br>
<br>
<div id="number_correct"></div>

Sum of Radio button values printed to the user

I'm very new to html.
I have a survey with two questions where the question choices are presented with radio buttons as this html code shows:
<form>
<p id="description">1. Question 1?</p>
<p>
<label><input type="radio" name="q1" value="5" /> Yes</label>
<label><input type="radio" name="q1" value="0" /> No</label>
</p>
<p id="description">2. Question 2?</p>
<p>
<label><input type="radio" name="q2" value="5" /> Yes</label>
<label><input type="radio" name="q2" value="0" /> No</label>
</p>
</form>
I want to print to the user the sum of his two selections.
So the output could be "You score is 10." if he answered yes to both questions etc.
How can I do this in the simplest way with the code being on the same page as the html code above? Is that possible?

var question1Answers = document.getElementsByName('q1');
var question2Answers = document.getElementsByName('q2');
var answer = 0;
question1Answers.forEach((e) => {
if (e.checked) {
answer += e.value;
break;
}
});
question2Answers.forEach((e) => {
if (e.checked) {
answer += e.value;
break;
}
});
console.log(answer);

please try this:
$("input[type='button']").click(function () {
var score = getChecklistItems();
alert("You score is : " + score);
});
function getChecklistItems() {
var total_score = 0
var result = $("input:radio:checked").get();
var checked_value = $.map(result, function (element) {
return $(element).attr("value");
});
for (i = 0; i < checked_value.length; i++) {
total_score += parseInt(checked_value[i])
}
return total_score
}
<form>
<p id="description">1. Question 1?</p>
<p>
<label><input type="radio" name="q1" value="5" /> Yes</label>
<label><input type="radio" name="q1" value="0" /> No</label>
</p>
<p id="description">2. Question 2?</p>
<p>
<label><input type="radio" name="q2" value="5" /> Yes</label>
<label><input type="radio" name="q2" value="0" /> No</label>
</p>
<p><input type="button" value="Submit"></p>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

"Flashing" issue w/ jQuery .Show()/.Hide()

I'm making a trivia game for my school assignment and I swear I've done literally everything to solve the issue I'm experiencing. Essentially, without wasting too much of your time, I am using the jQuery methods of .show() and .hide() to transition between different phases of my game. However, whenever I prompt my game to start, via button on-click function, the screen will quickly "flash" of the content that's supposed to be showing up, and then reverts back to the "start" screen. I'm at wits end with this, and any help will truly be appreciated.
$(document).ready(function() {
//set up variables for game
var timer = 45;
var correctCount = 0;
var wrongCount = 0;
var endGame = false;
//capturing responses from user input
var question1Capture = $("input[name='question1']:checked").val();
var question2Capture = $("input[name='question2']:checked").val();
var question3Capture = $("input[name='question3']:checked").val();
var question4Capture = $("input[name='question4']:checked").val();
var question5Capture = $("input[name='question5']:checked").val();
var question6Capture = $("input[name='question6']:checked").val();
var question7Capture = $("input[name='question7']:checked").val();
var question8Capture = $("input[name='question8']:checked").val();
var question9Capture = $("input[name='question9']:checked").val();
var question10Capture = $("input[name='question10']:checked").val();
//!! If extra time, add audio queues here!!
// !!----------------
// setting timeout
setTimeout(timerCountDown, 1000 * 45);
//functions
function timerCountDown() {
timer--;
$("#timeLeft").text("Time Left: " + timer + " seconds");
if (timer === 0) {
endGame === true;
}
console.log(timer);
}
//function to start the game
function gameStart() {
$(".playScreen").show();
$(".bannerScreen").show();
$(".startScreen").hide();
$(".endScreen").hide();
timerCountDown();
}
//function for when the game ends
function gameOver() {
$(".playScreen").hide();
$(".bannerScreen").hide();
$(".startScreen").hide();
$(".endScreen").show();
}
//function to initialize the screen before the user presses the button
function initializeScreen () {
$(".playScreen").hide();
$(".bannerScreen").hide();
$(".endScreen").hide();
$(".startScreen").show();
}
//function for going through responses
function responseCheck() {
// question 1
if (question1Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 2
if (question2Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 3
if (question3Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 4
if (question4Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 5
if (question5Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 6
if (question6Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 7
if (question7Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 8
if (question8Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 9
if (question9Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 10
if (question10Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
}
//calling initializeScreen function
initializeScreen();
//start game click event
$("#startButton").on("click", function() {
gameStart();
responseCheck();
if (endGame) {
console.log("times up!")
gameOver();
}
});
//if the submit button is pressed before the time runs out
$("#submitButton").on("click", gameOver);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title> Poke-Trivia </title>
<!--Meta-Viewport tag-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--jQuery Link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--javascript link-->
<script src="assets/javascript/app.js"></script>
<!--CSS link-->
<link href="assets/css/style.css" rel="stylesheet">
<!--Google Fonts link-->
<link href="https://fonts.googleapis.com/css?family=Oregano|Sedgwick+Ave" rel="stylesheet">
</head>
<body>
<h1> Pokemon Trivia </h1>
<form>
<!--START SCREEN BEGINS-->
<div class="startScreen">
<h2> Press the Pokeball to start! </h2>
<button id="startButton"></button>
</div>
<!--END OF START SCREEN-->
<h2 class="bannerScreen"> Answer 'em All ! </h2>
<h2 class="bannerScreen" id="timeLeft"> Time Left: 45 seconds </h3>
<!--START OF QUESTIONS-->
<div class="playScreen">
<p> Question 1: What is HM04 in GEN 1 (Red/Blue/Yellow)? </p>
<hr>
<div>
<input type="radio" name="question1" value="0" id="1A">
<label for="1A"> Cut </label>
<input type="radio" name="question1" value="0" id="1B">
<label for="1B"> Surf </label>
<input type="radio" name="question1" value="1" id="1C">
<label for="1C"> Strength </label>
<input type="radio" name="question1" value="0" id="1D">
<label for="1D"> Rock Smash </label>
</div>
<br>
<p> Question 2: Who is the Gym Leader of Fuschia City in GEN 2/4 (Silver/Gold/Diamond/Pearl/Platinum)?</p>
<hr>
<div>
<input type="radio" name="question2" value="0" id="2A">
<label for="2A"> Chuck </label>
<input type="radio" name="question2" value="0" id="2B">
<label for="2B"> Koga </label>
<input type="radio" name="question2" value="0" id="2C">
<label for="2C"> Whitney </label>
<input type="radio" name="question2" value="1" id="2D">
<label for="2D"> Janine </label>
</div>
<br>
<p> Question 3: Which Water-type Pokemon was a "Starter" for GEN 2/4 (Silver/Gold/Diamond/Pearl/Platinum)?</p>
<hr>
<div>
<input type="radio" name="question3" value="1" id="3A">
<label for="3A"> Totodile </label>
<input type="radio" name="question3" value="0" id="3B">
<label for="3B"> Oshawott </label>
<input type="radio" name="question3" value="0" id="3C">
<label for="3C"> Piplup </label>
<input type="radio" name="question3" value="0" id="3D">
<label for="3D"> Mudkip </label>
</div>
<br>
<p> Question 4: How many Legendary Pokemon were introduced in GEN 3 (Ruby/Sapphire/Emerald)?</p>
<hr>
<div>
<input type="radio" name="question4" value="0" id="4A">
<label for="4A"> 3 </label>
<input type="radio" name="question4" value="1" id="4B">
<label for="4B"> 8 </label>
<input type="radio" name="question4" value="0" id="4C">
<label for="4C"> 6 </label>
<input type="radio" name="question4" value="0" id="4D">
<label for="4D"> 2 </label>
</div>
<br>
<p> Question 5: In what region did GEN 6 (X/Y) take place?</p>
<hr>
<div>
<input type="radio" name="question5" value="0" id="5A">
<label for="5A"> Johto </label>
<input type="radio" name="question5" value="0" id="5B">
<label for="5B"> Unova </label>
<input type="radio" name="question5" value="1" id="5C">
<label for="5C"> Kalos </label>
<input type="radio" name="question5" value="0" id="5D">
<label for="5D"> Sinnoh </label>
</div>
<br>
<p> Question 6: In GEN 7 (Sun/Moon), what "notable" exclusion was present in the game, when compared to its predecessors?</p>
<hr>
<div>
<input type="radio" name="question6" value="1" id="6A">
<label for="6A"> Bicycles </label>
<input type="radio" name="question6" value="0" id="6B">
<label for="6B"> Rare Candies </label>
<input type="radio" name="question6" value="0" id="6C">
<label for="6C"> Pokemon Daycare </label>
<input type="radio" name="question6" value="0" id="6D">
<label for="6D"> A Rival </label>
</div>
<br>
<p> Question 7: In which year did the first ever Pokemon movie, featuring Mewtwo and Mew, release? </p>
<hr>
<div>
<input type="radio" name="question7" value="0" id="7A">
<label for="7A"> 1998 </label>
<input type="radio" name="question7" value="1" id="7B">
<label for="7B"> 1999 </label>
<input type="radio" name="question7" value="0" id="7C">
<label for="7C"> 2000 </label>
<input type="radio" name="question7" value="0" id="7D">
<label for="7D"> 2001 </label>
</div>
<br>
<p> Question 8: TRUE OR FALSE: Mark Hamill, of Star Wars fame, provided the voice of Entei in Pokemon 3: The Movie? </p>
<hr>
<div>
<input type="radio" name="question8" value="0" id="8A">
<label for="8A"> True </label>
<input type="radio" name="question8" value="1" id="8B">
<label for="8B"> False </label>
</div>
<br>
<p> Question 9: Is it possible to teach "Fly" to Scyther (Bug, Flying type)? </p>
<hr>
<div>
<input type="radio" name="question9" value="0" id="9A">
<label for="9A"> Yes, he does have wings after all. </label>
<input type="radio" name="question9" value="1" id="9B">
<label for="9B"> No, Game Freak hates him. </label>
</div>
<br>
<p> Question 10: How many current, potential evolutions are there for Evee? </p>
<hr>
<div>
<input type="radio" name="question10" value="0" id="10A">
<label for="10A"> 5 </label>
<input type="radio" name="question10" value="0" id="10B">
<label for="10B"> 6 </label>
<input type="radio" name="question10" value="0" id="10C">
<label for="10C"> 7 </label>
<input type="radio" name="question10" value="1" id="10D">
<label for="10D"> 8 </label>
</div>
<br>
<button id="submitButton" type="submit">Submit Answers</button>
</div>
<!-- End of Questions -->
<!-- Start of End Screen -->
<div class="endScreen">
<h2> Here are your results </h2>
<hr id="endScreenHr">
<h2 id="correctCountDiv"> Correct Answers: </h2>
<h2 id="wrongCountDiv"> Wrong Answers: </h2>
</div>
<!-- End of End Screen -->
</form>
</body>
</html>

Change button type from submit to button
<button id="submitButton" type="button">Submit Answers</button>

My resolution for this was to place event.preventDefault(); after my on click functions to prevent the form from naturally refreshing the page.

My countdown timer is not working

I am attaching my .js as well as php file, no output is being displayed on the screen not even the __________ placed in the <p> tag ,the php file is only up to the <p> tag where the id for the .js file is attached.
js code:
var timeleft = 600;
var startTime = 0;
var currentTime = 0;
function convertSeconds(s) {
var min = floor(s / 60);
var sec = s % 60;
return nf(min, 2) + ':' + nf(sec, 2);
}
var ding;
function preload() {
ding = loadSound("ding.mp3");
}
function setup() {
noCanvas();
startTime = millis();
var params = getURLParams();
console.log(params);
if (params.minute) {
var min = params.minute;
timeleft = min * 60;
}
var timer = select('#timer');
timer.html(convertSeconds(timeleft - currentTime));
var interval = setInterval(timeIt, 1000);
function timeIt() {
currentTime = floor((millis() - startTime) / 1000);
timer.html(convertSeconds(timeleft - currentTime));
if (currentTime == timeleft) {
ding.play();
clearInterval(interval);
//counter = 0;
}
}
}
html code:
<html>
<head>
<title>online examination system</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="style2.css">
<meta charset="UTF-8">
<script language="javascript" type="text/javascript src=" libraries
/p5.js</script>
< script language = "javascript"
src = "libraries/p5.dom.js" ></script>
<script language="javascript" src="libraries/p5.sound.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
</head>
<body>
<div class=header>
<img class="img-style" src="Online-Examination-System-Banner.jpeg" width="1166px" height="250px">
</div>
<div class="top">
<ul id="navigation">
<li>HOME</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
<li>EXAMINATION</li>
<li>LOGIN</li>
<li>LOGOUT</li>
</ul>
</div>
<p style="font-size:40;color:white;font-weight:bolder;">Welcome !</p>
<p id="timer" style="color:white;font-family:courier;font-size:28px; float:center;">______</p>
<form action="cplus.php" method="post" >
<div style="margin-top:10px;margin-right:85px;margin-left:100px;margin- bottom:20px;background:rgba(0,0,0,0.5)">
<p style="color:white;font-family:courier;font-size:18px">1. Which of the following correctly declares an array?</p> <br>
<input class="exam-btn" type="radio" name="q1" id="q1-a" value="A" checked>
<label for="q1-a" style="color:white;font-family:courier;font-size:18px">int array[10];</label>
<input class="exam-btn" type="radio" name="q1" id="q1-b" value="B">
<label style="color:white;font-family:courier;font-size:18px">int array;</label>
<input class="exam-btn" type="radio" name="q1" id="q1-c" value="C">
<label style="color:white;font-family:courier;font-size:18px">array{10};</label>
<input class="exam-btn" type="radio" name="q1" id="q1-d" value="D">
<label style="color:white;font-family:courier;font-size:18px">array array[10];</label>
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">2. What is the index number of the last element of an array with 9 elements?</p> <br>
<input class="exam-btn" type="radio" name="q2" id="q2-a" value="A">
<label style="color:white;font-family:courier;font-size:18px">9</label>
<input class="exam-btn" type="radio" name="q2" id="q2-b" value="B" checked>
<label style="color:white;font-family:courier;font-size:18px">8</label>
<input class="exam-btn" type="radio" name="q2" id="q2-c" value="C">
<label style="color:white;font-family:courier;font-size:18px">0</label>
<input class="exam-btn" type="radio" name="q2" id="q2-d" value="D">
<label style="color:white;font-family:courier;font-size:18px">programmer defined</label>
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">3. Which of the following accesses the seventh element stored in array?</p> <br>
<input class="exam-btn" type="radio" name="q3" id="q3-a" value="A" checked>
<label style="color:white;font-family:courier;font-size:18px">array[6];</label>
<input class="exam-btn" type="radio" name="q3" id="q3-b" value="B" >
<label style="color:white;font-family:courier;font-size:18px">array[7];</label>
<input class="exam-btn" type="radio" name="q3" id="q3-c" value="C" >
<label style="color:white;font-family:courier;font-size:18px">array(7);</label>
<input class="exam-btn" type="radio" name="q3" id="q3-d" value="D" >
<label style="color:white;font-family:courier;font-size:18px">array;</label>
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">4. Which of the following gives the memory address of the first element in array?</p> <br>
<input class="exam-btn" type="radio" name="q4" id="q4-a" value="A" >
<label style="color:white;font-family:courier;font-size:18px">array[0];</label>
<input class="exam-btn" type="radio" name="q4" id="q4-b" value="B" >
<label style="color:white;font-family:courier;font-size:18px">array[1];</label>
<input class="exam-btn" type="radio" name="q4" id="q4-c" value="C" >
<label style="color:white;font-family:courier;font-size:18px">array[2];</label>
<input class="exam-btn" type="radio" name="q4" id="q4-d" value="D" checked>
<label style="color:white;font-family:courier;font-size:18px">none</label>
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">5. What will be the output of this program?</p> <br>
<pre style="color:white;font-family:courier;font-size:18px">
#include <stdio.h>
using namespace std;
int array1[] = {1200, 200, 2300, 1230, 1543};
int array2[] = {12, 14, 16, 18, 20};
int temp, result = 0;
int main()
{
for (temp = 0; temp < 5; temp++)
{
result += array1[temp];
}
for (temp = 0; temp < 4; temp++)
{
result += array2[temp];
}
cout << result;
return 0;
}
</pre>
</pre>
<input class="exam-btn" type="radio" name="q5" id="q5-a" value="A" >
<label style="color:white;font-family:courier;font-size:18px">6553</label>
<input class="exam-btn" type="radio" name="q5" id="q5-b" value="B" checked>
<label style="color:white;font-family:courier;font-size:18px">6533</label>
<input class="exam-btn" type="radio" name="q5" id="q5-c" value="C" >
<label style="color:white;font-family:courier;font-size:18px">6522</label>
<input class="exam-btn" type="radio" name="q5" id="q5-d" value="D" >
<label style="color:white;font-family:courier;font-size:18px">12200</label>
<br><br><br><br>
<! 1. token 2. sensitive 3. identifiers
4. octal 5. \0n -->
<p style="color:white;font-family:courier;font-size:18px">6.The smallest individual unit in a program is known as a …………………… </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p><input class="exam-btn" type="text" name="" >
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">7.C++ Language is case …………………. </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p><input class="exam-btn" type="text" name="" >
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">8.An ………………… is a long sequence of letters and digits. </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p><input class="exam-btn" type="text" name="" >
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">9.A sequence of digits beginning with zero is considered to be …………….number. </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p><input class="exam-btn" type="text" name="" >
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">10.………………. escape sequence represents the given number in octal form. </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p>
<input class="exam-btn" type="text" name="" >
<br><br><br><br>
<input type="submit" value="Submit quiz">
</div>
<div style="font-size:18px;color:white;font-weight:bolder;">
<?php
$answer1;
$answer2;
$answer3;
$answer4;
$answer5;
$answer1 = $_POST['q1'];
$answer2 = $_POST['q2'];
$answer3 = $_POST['q3'];
$answer4 = $_POST['q4'];
$answer5 = $_POST['q5'];
$totalcorrect;
$totalcorrect = 0;
if($answer1 == "A") {$totalcorrect++;}
if($answer2 == "B") {$totalcorrect++;}
if($answer3 == "A") {$totalcorrect++;}
if($answer4 == "D") {$totalcorrect++;}
if($answer5 == "B") {$totalcorrect++;}
echo "total correct answers are".$totalcorrect;
?>
</div>
</div>
</form>
</body>
</html>

issue with if/else conditions with radio elements

I'm not good with Javascript and I'm trying to build a two-question quiz based on yes-no answers. When I look at the console I see the yes-no values if I do console.log(answer1 + answer3); But the alert doesn't work. If I remove .checked and do equal to true/false the first alert works.
Any help would be appreciated
var answer1 = document.getElementById('q1').value;
var answer2 = document.getElementById('q2').value;
var answer3 = document.getElementById('q3').value;
var answer4 = document.getElementById('q4').value;
if (answer1.checked && answer3.checked) {
alert('walking park');
}
else if (answer1.checked && answer4.checked) {
alert('no walk in park');
}
else if (answer2.checked && answer4.checked ) {
alert('oh noooo!');
}
else if (answer2.checked && answer3.checked) {
alert('cor blimey gov!');
}
<form>
<p>Question 1</p>
<fieldset>
<label for="Question1">Can your dog eat food?</label>
<input type="radio" id="q1" name="question1" value="yes"> Yes<br>
<input type="radio" id="q2" name="question1" value="no"> No
</fieldset>
<p>Question 2</p>
<fieldset>
<label for="Question2">Can your dog run in the park</label>
<input type="radio" id="q3" name="question2" value="yes"> Yes<br>
<input type="radio" id="q4" name="question2" value="no"> No
</fieldset>
<button type="button" id="myBtn" class="btn btn-med btn-brand-one">submit</button>
</form>

Use checked == true or simply checked and remove .value
answer1 = document.getElementById('q1');
answer2 = document.getElementById('q2');
answer3 = document.getElementById('q3');
answer4 = document.getElementById('q4');
function checkanswear(event){
event.preventDefault()
if (answer1.checked && answer3.checked) {
alert('walking park');
}
else if (answer1.checked&& answer4.checked) {
alert('no walk in park');
}
else if (answer2.checked && answer4.checked ) {
alert('oh noooo!');
}
else if (answer2.checked && answer3.checked) {
alert('cor blimey gov!');
}
}
<form>
<p>Question 1</p>
<fieldset>
<label for="Question1">Can your dog eat food?</label>
<input type="radio" id="q1" name="question1" value="yes"> Yes<br>
<input type="radio" id="q2" name="question1" value="no"> No
</fieldset>
<p>Question 2</p>
<fieldset>
<label for="Question2">Can your dog run in the park</label>
<input type="radio" id="q3" name="question2" value="yes"> Yes<br>
<input type="radio" id="q4" name="question2" value="no"> No
</fieldset>
<button onclick="checkanswear(event)" id="myBtn" class="btn btn-med btn-brand-one">submit</button>
</form>

The problem is that the .value of your checkboxes is the string "yes" or "no". Strings don't have a checked attribute.
Solution: Just remove the .value part. Let answer1, answer2, etc be the input elements themselves. Then you can use .checked on them.
Example:
document.getElementById('myBtn').onclick = function() {
var answer1 = document.getElementById('q1');
var answer2 = document.getElementById('q2');
var answer3 = document.getElementById('q3');
var answer4 = document.getElementById('q4');
if (answer1.checked && answer3.checked) {
alert('walking park');
} else if (answer1.checked && answer4.checked) {
alert('no walk in park');
} else if (answer2.checked && answer4.checked) {
alert('oh noooo!');
} else if (answer2.checked && answer3.checked) {
alert('cor blimey gov!');
}
};
<form>
<p>Question 1</p>
<fieldset>
<label for="Question1">Can your dog eat food?</label>
<input type="radio" id="q1" name="question1" value="yes"> Yes<br>
<input type="radio" id="q2" name="question1" value="no"> No
</fieldset>
<p>Question 2</p>
<fieldset>
<label for="Question2">Can your dog run in the park</label>
<input type="radio" id="q3" name="question2" value="yes"> Yes<br>
<input type="radio" id="q4" name="question2" value="no"> No
</fieldset>
<button type="button" id="myBtn" class="btn btn-med btn-brand-one">submit</button>
</form>