Quiz page only works if incorrect answer, score counter does not advance

This is a single-page, “multi-phase” form. It looks like several pages but it is actually resetting the margin from the top of the page each time a question is answered correctly (specifically, upon clicking the “x” to dismiss the “Correct!” popup modal).

(a heavily-modified version of this: https://www.lockedownseo.com/build-a-quiz-in-php-tutorial/ )

The problem is it loops, never showing the form post results page. UNLESS you deliberately answer a question wrong, in which case you get the results, plus these errors:
Notice : Undefined offset: 1 in C:\Users\zan\phpQuiz\php-quiz\test.php on line 262
Notice : Undefined offset: 1 in C:\Users\zan\phpQuiz\php-quiz\test.php on line 263
Notice : Undefined index: in C:\Users\zan\phpQuiz\php-quiz\test.php on line 263

If you don’t see line numbers you can copy-paste into your own editor, but basically line 262 is the opening of an if statement:

if ($Answers[$QuestionNo] != $Value['CorrectAnswer']){
        echo 'You answered: <p style="color: red;">'.$Value['Answers'][$Answers[$QuestionNo]].'</p>'; // Replace style with a class
        echo 'Correct answer: <p style="color: green;">'.$Value['Answers'][$Value['CorrectAnswer']].'</p>';
    } else {
        echo 'Correct answer: <p style="color: green;">'.$Value['Answers'][$Answers[$QuestionNo]].'</p>'; // Replace style with a class
        echo 'You are correct: <p style="color: green;">'.$Value['Answers'][$Answers[$QuestionNo]].'</p>'; 
        $counter++;
        

    }

I am not sure if these errors are related to the looping.

Below is my full code:

CSS in folder css/style.css :

* { 
  margin: 0; 
  padding: 0; 
}
html {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  width: 600px;
}
body { 
  /*background: #030305;
  color: #fff;*/ 
  font-family: 'Droid Serif', Times, serif; 
  font-size: 14px;
  max-width: 600px;
}
#page-wrap { 
  height: 450px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 600px;
}
h1 { 
  letter-spacing: 3px;
  margin: 25px 0; 
  text-transform: uppercase;
}
.index-sell, .index-headline {
  color: #1c2d37;
  left: 100px;
  margin: 0;
  position: absolute;
  text-align: center;
  width: 400px;
}
.index-headline {
  font-size: 36px;
  height: 0;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px #fff;
  top: 55px;
}
.index-sell, .anticipate {
  font-size: 21px;
  line-height: 28px;
  text-transform: uppercase;
}
.index-sell { top: 155px; }
#quiz .anticipate {
  color: #1c2d37;
  font-size: 1.5rem;
  /*line-height: 41px;*/
  padding: 50px 0 0 0;
  text-shadow: 1px 1px rgba(255,255,255,.666);
}
.transparent {
  color: transparent;
  display: none;
  opacity: 0;
  visibility: hidden;
}
#start-quiz {
  margin-top: 25px;
}
.img-index {
  display: block;
  left: 25px; /* 27px */
  margin: 0 auto;
  position: absolute;
}
.text1 {
  font-size: 13px;
  line-height: 21px;
  margin: 25px 25px 0;
  padding: 110px 25px 0;
  position: relative;
  text-align: center;
}
.take-quiz-btn, .embed-btn, .close-btn {
  -webkit-appearance: none;
  border: none;
  background: #28505e;
  color: #f3f4ef;
  cursor: pointer;
  font-family: 'Droid Serif', Times, serif;
}
.take-quiz-btn, .close-btn {
  background: #28505e;
  font-size: 21px;
  text-shadow: 1px 1px rgba(66,66,66,.666);
  text-transform: uppercase;
}
.take-quiz-btn {
  top: 267px; 
  width: 259px;
}
.index-btn {
  height: 49px;
  left: 168px;
  padding: 9px 0 6px 0;
  position: absolute;
  top: 267px; /* 283 */
}
#replay {
  display: block;
  height: 46px;
  line-height: 46px;
  margin: 20px 0 0 0;
  padding: 0;
  text-align: center;
  text-decoration: none;
}
.index-btn:hover, #replay:hover {
  background: ;
}
.results-img {
  border: 4px solid #ebe9e6;
  left: -25px;
  position: absolute;
  top: 8px;
  width: 208px;
}
.share {
  bottom: 25px;
  position: absolute;
}
.lb {
  left: 24px;
}
.rb {
  left: 94px;
}
.share img {
  width: 45px;
}
.shareprompt {
  bottom: 6px;
  left: 24px;
  position: absolute;
}
.designby {
  bottom: 6px;
  font-size: 14px;
  right: 24px;
  line-height: 21px;
  position: absolute;
}
.designby img {
  height: auto;
  margin-bottom: -4px;
  width: 130px;
}
.shadow1 {
  color: #ebe9e6;
  text-shadow: 2px 2px 5px rgba(15, 15, 15, .99);
}
.diminish { font-size: 76%; }
.text-indent {
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}
#quiz {
  margin: 0 18px;
  padding: 0 0 0 1px;
  position: relative;
  -webkit-transition: all linear .35s;
  -moz-transition: all linear .35s;
  -o-transition: all linear .35s;
  -ms-transition: all linear .35s;
  transition: all linear .35s;
}
.quiz-overlay, .result {
  height: 325px; /* 359px */
  position: absolute;
  width: 552px;
  z-index: -1;
}

.index .quiz-overlay, .quiz-overlay { 
  background: rgba(226,255,246,.52); 
  background-size: cover;
  /* background: #282537;
 background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
 background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
 background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
 background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%); 
 from https://codepen.io/taylorvowell/pen/BkxbC */
}
.index .quiz-overlay {
  left: 24px;
}
#quiz ul li div.quiz-overlay { margin: 0; }
#quiz ul {
  list-style-type: none;
  margin-top: 0;
}
#quiz h3 {
  /*color: #fff;*/
  font-size: 1rem; /* 18*/
  font-weight: 400;
  line-height: 32px; 
  margin: 0 0 1px 0;
  min-height: 64px;  
  padding: 9px 50px 0;
  text-align: center;
}
#quiz ul li {
  height: 335px;
  margin: 25px 0 95px 0;
  max-height: 335px;
  min-height: 335px;
}
#quiz ul li div {
  color: #ebe9e6;
  margin: 10px 0;
  padding: 1px 0;
}
#quiz ul li div.mtm {
  margin-top: 20px;
}
#quiz input {
  /*opacity: 0;*/
  vertical-align: middle;
  width: auto;
}
#quiz label, #quiz input#submit-quiz {
  background-color: #1f4c5b; 
  cursor: pointer;
  display: inline-block;
  z-index: 99;
}
#quiz label {
  /*height: 31px;*/ 
  font-size: 1rem;  
  /*line-height: 2.55em;   Added */
  margin: 0 30px 0 0;
  /*max-width: 476px;
  min-width: 476px;*/
  padding: 2px 0 4px 16px;
  width: 20em;
}



.szlider{
  width:552px;
  height:15px;
  margin: 0% !important;
  padding: 0% !important;
  border:1px solid #000;
  overflow:hidden; }
.pBar{
  width:1%;
  height:15px;
  margin: 0% !important;
  padding: 0% !important;
  background: #d65946; }

  .progressBar {

    color: #eee4e4 !important;
    font-size: 15px;
    font-style: italic;
    font-weight: bold;
    left: 25px !important;
    position: relative;
    top: -26px !important;
    height: 12px;

}


#quiz h3.showmyscore {

}
#quiz input#submit-quiz {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #1f4c5b; /* #098636 */
  border: none;
  color: #ebe9e6;
  display: block;
  font-family: 'Droid Serif', Times, serif;
  font-size: 21px;
  height: 44px;
  margin: 43px auto 0; /*margin: 3rem 3rem 1rem;*/
  opacity: 1;
  width: 250px;
}
#quiz label, #quiz input[type=radio]:checked + label, #quiz input#submit-quiz, #replay, .take-quiz-btn {
  -webkit-transition: all ease .11s;
  -moz-transition: all ease .11s;
  -o-transition: all ease .11s;
  -ms-transition: all ease .11s;
  transition: all ease .11s;
}
#quiz label:hover, #quiz input[type=radio]:checked + label, #quiz input#submit-quiz:hover, #replay:hover, .take-quiz-btn:hover {
  background: #098636; /* #c91e0a; */
  color: #fbfbfb;
}
#quiz .quiz-progress {
  color: #ebe9e6;
  font-size: 14px;
  padding: 7px 30px 5px 0; 
  text-align: right;
  text-shadow: 1px 1px #131313;
}
.nomargin { margin: 0;}
.test-results2 {
  color: #fff;
  font-size: 15px;
  line-height: 21px;
  text-shadow: 1px 1px rgba(2,3,5,.666);
}
.test-results2 .score {
  color: #678792; /*#e2220d*/
  font-size: 22px; 
  line-height: 30px; 
  margin-bottom: 4px;
  text-transform: uppercase;
}
.you-chose { margin-bottom: 7px; }
.embed {
  font-size: 14px;
  position: absolute;
  right: 26px; 
  text-shadow: 1px 1px #131313;
  top: 8px; 
}
#modalbg {
  background: #333; 
  display: none;
  height: 100%;  
  left: 0; 
  opacity: .4; 
  /*position: fixed;*/ 
  top: 0;
  width: 100%;
  z-index: 9;
}
#modalwindow {
  background: rgba(255,255,255,.95); 
  border: 3px outset #CCC; 
  display: none; 
  height: 254px; 
  left: 25px;
  padding: 32px; 
  position: absolute; 
  top: 35px;
  width: 480px;
  z-index:10;
}
#modalmsg {
  color: #222;
  text-align: center; 
}
.embed-btn {
  background-color: transparent;
  font-size: 14px;
}
textarea.c-p {
  display: block;
  height: 50px;
  margin: 25px auto;
  width: 420px;
}
.close-btn {
  display: block;
  margin: 70px auto 0; /*197*/
  padding: 12px 24px;
}
.results-overlay {
	background-color: transparent;
	margin: 42px 0 0 65px;
  max-height: 325px; /* Added */
	position: relative;
	width: 510px;
}
.results-overlay .quiz-overlay {
  left: -41px;
  top: -7px;
}
.results-text {
	padding: 5px 35px 30px 215px; 
}
.score-details {
  font-size: 12px; /* 14 */
  line-height: 19px; /* 20 */
}
.score-details-sm {
  font-size: 12px;
  line-height: 19px;
}
.result {
  height: 325px;
}

/* ------ \m/ ------ */

HTML (the PHP form posts to itself) in test.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic' rel='stylesheet' type='text/css'>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>

    <title>2020 Member Review</title>

    <style>


.close-button {
   float: right;
   width: 1.5rem;
   line-height: 1.5rem;
   text-align: center;
   cursor: pointer;
   border-radius: 0.25rem;
   background-color: lightgray;
}

.close-button:hover {
   background-color: darkgray;
}
	

.popup{
  position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   visibility: hidden;
   transform: scale(1.1);
   transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
		
.headline{
    font-size: 45px;
}

.inside{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 1rem 1.5rem;
    width: 24rem;
    border-radius: 0.5rem;
}
        
    @media screen and (max-width: 360px) {
    div { 
        width: 15em;
        padding: .1em;
        }
    h2, h3 {
        width: 15em;
        padding: .5em;
        text-align: left;
        }
        .anticipate {
        width: 15em;
        padding: .1em;
        text-align: left;
        }

    #quiz {margin: 0 0px;}

    .quiz-overlay{
        width: 25em;
        
        height: 559px;
        }
    .szlider, .fwrd, .fwrdn, label{
        width: 25em;
        }
    

    .member-info{
        height: 31px;
        font-size: 1rem;
        cursor: none;
        background-color: white;
        line-height: 2.55em;
        margin: 0 30px 0 0;
        max-width: 20rem;
    }

    .inside{
        width: 13rem;
    }

    .submit-quiz {
        display: block;
        margin: 13px auto 0;
    }

    .quiz ul, li{
        margin: 25px 1px 95px -11px;}
    
    .result-page{
        margin: 0 0 0 0;
        position: relative;
        width: 360px;
        overflow: visible;

        #page-wrap{overflow: visible;}
    }

    #quiz input#submit-quiz {
        margin: 3rem 3rem 1rem;
  
    }
    

    
    
    }


    }

    }



}	
	</style>
</head>
<body>
    <div id="page-wrap">
        <!-- a hidden input to hold the values for the progress bar -->
        <input type="hidden" id="questionNumber" value="<?php echo $QuestionNo; ?>">
        <input type="hidden" id="arrayLen" value="<?php echo sizeof($Questions); ?>">

        <?php 


        $Questions = array(
            1 => array(
                'Question' => 'CSS stands for',
                'Answers' => array(
                    'A' => 'Computer Styled Sections',
                    'B' => 'Cascading Style Sheets',
                    'C' => 'Crazy Solid Shapes'
                ),
                'CorrectAnswer' => 'B'
            ),
            2 => array(
                'Question' => 'Second question',
                'Answers' => array(
                    'A' => 'First answer of Second question',
                    'B' => 'Second answer Second question',
                    'C' => 'Hint: this is the right answer'
                ),
                'CorrectAnswer' => 'C'
            ),
            3 => array(
                'Question' => 'Internet Explorer 6 was released in...',
                'Answers' => array(
                    'A' => '2001',
                    'B' => '1998',
                    'C' => '2006'
                ),
                'CorrectAnswer' => 'A'
            ),
            4 => array(
                'Question' => 'SEO Stands for...',
                'Answers' => array(
                    'A' => 'Secret Enterprise Organizations',
                    'B' => 'Special Endowment Opportunity',
                    'C' => 'Search Engine Optimization'
                ),
                'CorrectAnswer' => 'C'
            ),
            5 => array(
                'Question' => 'A 404 Error...',
                'Answers' => array(
                    'A' => 'does not impact web analytics',
                    'B' => 'is an HTTP Status Code meaning Page Not Found',
                    'C' => 'is a deprecated error code in HTML5'
                ),
                'CorrectAnswer' => 'B'
            )
        );

        if (isset($_POST['answers'])){
            $Answers = $_POST['answers']; // Get submitted answers.
            $counter = 0;
            $results = "Your Score: ";

            // Now this is fun, automated question checking! 

                                    
                     
        if (isset($_REQUEST['submitted'])) {
        // Initialize error array.
          $errors = array();
          // Check for a proper First name more than 2 chars but less than 20 chars
          if (!empty($_REQUEST['firstname'])) {
            $firstname = $_REQUEST['firstname'];
            $pattern = "/^[a-zA-Z0-9\_]{2,20}/";// This is a regular expression that checks if the name is valid characters
            if (preg_match($pattern,$firstname)){ $firstname = $_REQUEST['firstname'];}
            else{ $errors[] = 'Your Name can only contain _, 1-9, A-Z or a-z 2-20 long.';}
            } else {$errors[] = 'You forgot to enter your First Name.';}
          
          // Check for a proper Last name more than 2 chars but less than 20 chars
          if (!empty($_REQUEST['lastname'])) {
            $lastname = $_REQUEST['lastname'];
            $pattern = "/^[a-zA-Z0-9\_]{2,20}/";// This is a regular expression that checks if the name is valid characters
            if (preg_match($pattern,$lastname)){ $lastname = $_REQUEST['lastname'];}
            else{ $errors[] = 'Your Name can only contain _, 1-9, A-Z or a-z 2-20 long.';}
            } else {$errors[] = 'You forgot to enter your Last Name.';}

          // Check for a proper email
          if (!empty($_REQUEST['email'])) {
            $email = $_REQUEST['email'];
            $pattern = "/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/";// This is a regular expression that checks if the email is valid characters
            if (preg_match($pattern,$email)){ $email = $_REQUEST['email'];}
            else{ $errors[] = 'The Email Address you entered does not appear to be valid.';}
            } else {$errors[] = 'You forgot to enter your email address.';}          
          
          //Check for a valid member number {7,20} chars
          if (!empty($_REQUEST['member'])) {
            $member = $_REQUEST['member'];
            $pattern = "/^[0-9\_]/";
            if (preg_match($pattern,$member)){ $member = $_REQUEST['member'];}
            else{ $errors[] = 'Your Member number can only be numbers.';}
            } else {$errors[] = 'You forgot to enter your Member number.';}
          
          }
          //End of validation 

          $output = "First Name: " . $firstname . PHP_EOL . "Last Name: " . $lastname .  PHP_EOL . "Email: " . $email . PHP_EOL . "Member number: " . $member . "".PHP_EOL;

         
  //Print Errors
  if (isset($_REQUEST['submitted'])) {
      echo '<section class="result-page">';
  // Print any error messages. 
  if (!empty($errors)) { 
  echo '<hr /><h3>The following occurred:</h3><ul>'; 
  // Print each error. 
  foreach ($errors as $msg) { echo '<li>'. $msg . '</li>';}
  echo '</ul><h3>Your form could not be sent due to input errors.</h3><hr />';
} else {
    echo '<hr /><h3 align="center">Your review was sent. Thank you!</h3><hr /><p>2020 Member Review Results
    Here are the results of your member review. Your score has been reported to the office. If you have answered all questions correctly, you have completed this portion of the renewal process. If you answered any questions incorrectly, click <a href="2020_member_review.php">here</a> to retake the review. Click <a href="../accounts/myaccount.aspx">here</a> to return to your account.</p>'; 
  echo $output . '<br />';

  foreach ($Questions as $QuestionNo => $Value){
    // Echo the question
    echo $Value['Question'].'<br />';

    if ($Answers[$QuestionNo] != $Value['CorrectAnswer']){
        echo 'You answered: <p style="color: red;">'.$Value['Answers'][$Answers[$QuestionNo]].'</p>'; // Replace style with a class
        echo 'Correct answer: <p style="color: green;">'.$Value['Answers'][$Value['CorrectAnswer']].'</p>';
    } else {
        echo 'Correct answer: <p style="color: green;">'.$Value['Answers'][$Answers[$QuestionNo]].'</p>'; // Replace style with a class
        echo 'You are correct: <p style="color: green;">'.$Value['Answers'][$Answers[$QuestionNo]].'</p>'; 
        $counter++;
        

    }
    echo $counter;
  }
    echo '<br /><hr>'; 
    if ($counter == 0){ 
        // $counter = '0';
        $results = "Your score: $counter/5"; 
    } else { 
        $results = "Your score: $counter/5"; 
    }
    
    echo $results;

}
    echo '</section>';
  
  } 

  if (isset($_REQUEST['submitted'])) {
    if (empty($errors)) { 
     //open file for output
     $fp = fopen("contacts.txt","a");
     //write to the file
     $date=new DateTime(); //this returns the current date time
     $DT = $date->format('Y-m-d-H-i-s');
      fwrite($fp, $DT . $output . $results .PHP_EOL . ", ");
     fclose($fp);
    }
  }
//   echo $results;
//End of errors array
  
                    
        } else {
        ?>
        <form action=<?php echo $_SERVER['PHP_SELF']; ?> method="post" id="quiz">
        <!-- <form action="processing.php" method="post" id="quiz"> -->
        <ul id="test-questions">
        <li>
                <div class="quiz-overlay"></div>
                <h3 class="anticipate">You must achieve a score of 100% to pass this review. The answers to this review can all be found in your 2020 Member Handbook. At the end, you will be asked to enter your name and Member Number.</h3>
                
    <input type="button" value="Start Quiz" class="advance" />
            </li>

            <?php foreach ($Questions as $QuestionNo => $Value){ ?>
            <li>
                <div class="quiz-overlay"></div>
                
                <div class="szlider">
                    <div class="pBar"></div>
                    <div class="progressBar"></div>
                    
                </div>

                <h3><?php echo $Value['Question']; ?></h3>

                <div class="mtm">
                <?php 
                    foreach ($Value['Answers'] as $Letter => $Answer){ 
                    $Label = 'question-'.$QuestionNo.'-answers-'.$Letter;
                    $RadioClass = "";
                    if ($Letter != $Value['CorrectAnswer']){
                        $Class = 'fwrdn label'.strtolower($Letter);
                        $RadioClass = 'fwrdn';
                    }else{
                        $Class = 'fwrd label'.strtolower($Letter);
                        $RadioClass = 'fwrd';
                    }
                    
                ?>
                <div>
                    <input type="radio" name="answers[<?php echo $QuestionNo; ?>]" id="<?php echo $Label; ?>" class="<?php echo $RadioClass; ?>" value="<?php echo $Letter; ?>" />
                    <label class="<?php echo $Class; ?>" for="<?php echo $Label; ?>"><?php echo $Letter; ?>) <?php echo $Answer; ?> </label>
                </div>
                <?php } ?>
                    </div></li>
                    
            <?php } ?>
            <li>
                <div class="quiz-overlay"></div>
                <h3 class="">Final steps:enter your Name, Email address and Member number:</h3>
                <label class="member-info">First Name:  <input name="firstname" type="text" placeholder="- Enter First Name -" required /><br></label><br>  
    <label>Last Name:   <input name="lastname" type="text" placeholder="- Enter Last Name -" required /><br></label><br>  
    <label>Email:   <input name="email" type="email" placeholder="- Enter Email -" required /><br></label><br> 
    <label>Member Number:   <input name="member" type="text" placeholder="- Your Member Num -" required /><br></label><br>
    <input type="submit" value="Submit Quiz" id="submit-quiz" name="submitted"/>
    <!-- <input type="button" value="next page" class="advance" /> -->
            </li>
            <!-- <li>
                <div class="quiz-overlay"></div>
                <h3 class="anticipate">Now it&#8217;s time to see your results...</h3>
                <input type="submit" value="Submit Quiz" id="submit-quiz" name="submitted"/>
            </li> -->

        </ul>
        <!-- <input type="submit" value="Submit Quiz" /> -->
        </form>
        <?php 
        }
        ?>

        <!-- correct/incorrect modals -->
    <div id="correctPopUp" class="popup">
		<div class="inside">
		
		    <!-- <span class="close-button" onclick="document.getElementById('correctPopUp').style.visibility = 'hidden'; return false;">&times;</span> -->
            <span class="close-button adv">&times;</span>

			<!--You are:<br/>
			<span class="headline">Correct!</span>
			<br/>-->
			<p color="green">Correct!</p>

	    </div>
	
	
	    <div id="inCorrectPopUp" class="popup">
		    <div class="inside">
                <span class="close-button" onclick="document.getElementById('inCorrectPopUp').style.visibility = 'hidden'; return false;">&times;</span>
                <!--<span class="headline">Incorrect</span>-->
			    <p color="red">Incorrect.  Please try again.</p>
		    </div>
        </div>

    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
    <script>
        // sliderz progress bar
        var hiddenInputLen = document.getElementById('arrayLen');
        var arrLength = 5;
        // var arrLength = hiddenInputLen.value;
        var hiddenInputQno = document.getElementById('questionNumber');
        var arrQuestNo = 0;
        // var arrQuestNo = hiddenInputQno.value; 
        
        function drawszlider(totalQuestions, currentQuestion){
            var progressBar = Math.round((currentQuestion * 100) / (totalQuestions + 1));
            var i = 0;
            for (i = 0; i < arrLength; i++) {
                if(arrQuestNo === 0){
                    document.getElementsByClassName("pBar")[i].style.width = 1 + '%';
                    document.getElementsByClassName("progressBar")[i].innerHTML= '0%';
                }else{
                    document.getElementsByClassName("pBar")[i].style.width = progressBar + '%';
                    document.getElementsByClassName("progressBar")[i].innerHTML = progressBar + '%';

                }

            };
            arrQuestNo += 1;

        }
        drawszlider(arrLength, arrQuestNo); 

        // no fwrd clicks (wrong answer does not advance quiz forward, red color)
        var fwrdn = document.querySelectorAll('.fwrdn');
        
        var i = 0;
        for (var i = 0; i < fwrdn.length; i++) {
            fwrdn[i].addEventListener('click', function (event) {
                var clicked = false;
                // event.preventDefault();
                if(clicked === false){
                    // this.style.backgroundColor = "red"; 
                    // this.style.textDecorationLine = "line-through";
                    document.getElementById('inCorrectPopUp').style.visibility = 'visible';
                    clicked = true;
                    console.log('the wrong answer = ' + event.target.value + ' ' + event.target.label);
                    
                }else if(clicked === true){
                    this.style.backgroundColor = "#1f4c5b"; 
                    this.style.textDecorationLine = "none";
                    clicked = false;
                }

            });
        }
        var fwrd = document.querySelectorAll('.fwrd');
        for (var i = 0; i < fwrd.length; i++) {
            fwrd[i].addEventListener('click', function (event) {
                var clicked = false;
                event.preventDefault();
                if(clicked === false){
                    document.getElementById('correctPopUp').style.visibility = 'visible';
                    clicked = true;
                    console.log('the right answer = ' + event.target.value + ' ' + event.target.label);
                }else if(clicked === true){
                    this.style.backgroundColor = "#1f4c5b"; 
                    this.style.textDecorationLine = "none";
                    clicked = false;
                }

            });
        }


    </script>
    <script>
    //subtract from margin top upon closure of "correct" modal
           (function($) {
              var timeout= null;
              var $mt = 0;
              $(".advance, .adv").click(function(){
                console.log("correct close x")
                document.getElementById('correctPopUp').style.visibility = 'hidden';
                clearTimeout(timeout);
                timeout = setTimeout(function(){ 
                    $mt = $mt - 430;
                    $("#test-questions").css("margin-top", $mt); 
                }, 333);
                
                drawszlider(arrLength, arrQuestNo);
              });
           }(jQuery))
           
    </script>

</body>
</html>

I am pretty much at my wits’ end and going insane staring at this code for an embarrassing amount of hours…if anyone can help, I’d be very happy to tip (DM your paypal or work something else out!)

When I test out your code, it seems to work fine. I get all the way to the final form. I answered all of the questions correctly.

image

That’s it, yes!
Can you type in some dummy form filler, and submit?
It should show all the questions repeated and the dummy text submitted. On the “server” it’s supposed to create a txt file called “contacts” containing the score and the user info.

After submitting the form with dummy information, I see the following after submitting.

image

No file is created on the backend.

Ok, that confirms my problem, yes. It just loops back to the front page of the quiz again… >sigh<

BUT if you purposely get one or more of the answers wrong, for some reason it will show the results page

I’ve commented out all the JS, then open it in the browser and in the inspector, changed the div with an id of “page-wrap” overflow: hidden to ‘visible’. That way I can do the entire quiz and submit without any JS getting in the way. It does then work fine. I’ve been unable to narrow it down to which script is causing issues.

Turns out it was event.preventDefault();

This was a culprit a day ago and I had commented it out, so it was completely off my radar…
somehow it got un-commented!
Thanks for rallying 'round!!

1 Like