CSS display property not responding accordingly through JS

Question

I am in the middle of a project where I am working on a survery for the user on a website. The user can either click a "back" button, which takes him to the previous question, or a "next" button, which takes him to the next question.

All of these questions are within the same parent div, seperated into their own divs. I am giving each question div within the parent div a property of hide and show so that the relavant question shows up based on the user clicking next and back. So if the user clicks next, I will hide the current question div and show the next question div. Vice versa for when the user clicks the back button.

$(document).ready(function() {

  var foodChoice = document.getElementsByName("food");
  var backBtn = document.getElementById("backBtn");
  var nextBtn = document.getElementById("nextBtn");
  var questions = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
  currentQuestion = 0;


  //scrolling to next question

  $(nextBtn).click(function() {
    currentQuestion++;

    if (currentQuestion == questions.length - 1) {
      nextBtn.style.display = "none";
      backBtn.style.display = "none";
    }

    if (currentQuestion >= 1) {
      backBtn.style.visibility = "visible";
    }

    if (currentQuestion < questions.length) {
      document.getElementById(questions[currentQuestion]).style.display = "block";
      document.getElementById(questions[currentQuestion - 1]).style.display = "none";
    }

  });


  // scrolling to previous question

  $(backBtn).click(function() {
    currentQuestion--;
    if (currentQuestion > 0) {
      document.getElementById(questions[currentQuestion]).style.display = "none";
      document.getElementById(questions[currentQuestion - 1]).style.display = "block";
    }

    if (currentQuestion === 0) {
      backBtn.style.visibility = "hidden";
    }


  });

})

.question {
  display: none;
}

#eight textarea {
  width: 100%;
  min-height: 20vh;
}

#one {
  display: block;
}

#backBtn {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question-box">

  <div class="progress-bar">

    <h3 id="percent">7%</h3>

  </div>

  <div id="one" class="question">
    <p>On a scale of 0-5, where 0 is not at all likely and 5 is extremely likely:</p>
    <p>How likely are you to recommend Classic Screenings Cinema to someone else?</p>
    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="two" class="question">
    <p>On a scale of 0-5, where 0 is not enjoyed it at all and 5 is enjoyed it a lot:</p>
    <p>How much did you enjoy the film/event you watched?</p>
    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="three" class="question">
    <p>On a scale of 0-5, where 0 is very unhelpful and 5 is very helpful:</p>
    <p>Overall, how helpful were the Classic Screenings staff?</p>
    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="four" class="question">
    <p>Did you purchase any food / snacks from the cinema?</p>
    <div class="yesOrNo">
      Yes<input class="yorn" type="radio" name="food" value="yes"> No
      <input class="yorn" type="radio" name="food" value="no">
    </div>
    <div id="food-followUp" class="question">
      <p>On a scale of 0-5, where 0 is very poor and 5 is excellent:</p>
      <p>What do you rate the quality of the food / snacks?</p>
      <div class="answer">

        <ul>
          <li>0</li>
          <li><input type="radio" name="rate" value="0"></li>
        </ul>

        <ul>
          <li>1</li>
          <li><input type="radio" name="rate" value="1"></li>
        </ul>

        <ul>
          <li>2</li>
          <li><input type="radio" name="rate" value="2"></li>
        </ul>

        <ul>
          <li>3</li>
          <li><input type="radio" name="rate" value="3"></li>
        </ul>

        <ul>
          <li>4</li>
          <li><input type="radio" name="rate" value="4"></li>
        </ul>

        <ul>
          <li>5</li>
          <li><input type="radio" name="rate" value="5"></li>
        </ul>
      </div>
    </div>
  </div>

  <div id="five" class="question">
    <p>Did you visit the toilet facilities during your visit to Clasic Screenins Cinema?</p>
    <div class="yesOrNo">
      Yes<input class="yorn" type="radio" name="yorn" value="yes"> No
      <input class="yorn" type="radio" name="yorn" value="no">
    </div>
    <div id="facilities-followUp" class="question">
      <p>On a scale of 0-5, where 0 is extremely dissatisfied and 5 is extremely satisfied, how would you rate the following:?</p>
      <p>Cleanliness of the toilet facilities</p>

      <div class="answer">

        <ul>
          <li>0</li>
          <li><input type="radio" name="rate" value="0"></li>
        </ul>

        <ul>
          <li>1</li>
          <li><input type="radio" name="rate" value="1"></li>
        </ul>

        <ul>
          <li>2</li>
          <li><input type="radio" name="rate" value="2"></li>
        </ul>

        <ul>
          <li>3</li>
          <li><input type="radio" name="rate" value="3"></li>
        </ul>

        <ul>
          <li>4</li>
          <li><input type="radio" name="rate" value="4"></li>
        </ul>

        <ul>
          <li>5</li>
          <li><input type="radio" name="rate" value="5"></li>
        </ul>

      </div>
    </div>


  </div>

  <div id="six" class="question">
    <p>On a scale of 0-5, where 0 is extremely dissatisfied and 5 is extremely satisfied, how would you rate the following:?</p>
    <p>The amount of time it took to purchase your ticket, factoring in any time with queuing?</p>

    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="seven" class="question">
    <p>With regards to entering the cinema screen and taking your allocated seat, please let us know how strong you agree with the following statements, with 0 representing strongly disagree and 5 representing strongly agree.</p>
    <p>My allocated seat was in great condition</p>

    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>

    <p>The area around my seat was clean and tidy</p>

    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate2" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate2" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate2" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate2" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate2" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate2" value="5"></li>
      </ul>

    </div>

  </div>

  <div id="eight" class="question">
    <p>Were there any disruptions that occured during the viewing of you movie / event?</p>
    <div class="yesOrNo">
      Yes<input class="yorn" type="radio" name="yorn" value="yes"> No
      <input class="yorn" type="radio" name="yorn" value="no">
    </div>

    <p class="disrupted">Please tell us more about the disruption and what staff did to handle this</p>
    <textarea></textarea>

  </div>

  <div id="nine" class="question">

    <h2>THANK YOU FOR COMPLETING OUR SURVEY!</h2>

    <p>We are very grateful towards you taking the time out to complete this survery.</p>

    <p>Every couple of months our team reflect on these surverys and we develop straregies on the best ways to deal with areas in which can do with improving, as well as ideas on how to further strengthen the positives.</p>

    <p>Once again, we thank you for filling in the survey and we hope to see you soon!</p>

  </div>


</div>

<div class="navigate">

	<div id="backBtn" class="back questionchoice">

		<h2>BACK</h2>

	</div>

	<div id="nextBtn" class="next questionchoice">

		<h2>NEXT</h2>

	</div>

</div>

THE PROBLEM: What I am finding is when I click the next button all the way to the end of the survey, it works fine. However, the FIRST time I click the next button, the question which is supposed to be hidden is not, instead it appears in the previous question, which does show up. From that point, that same question which originally was supposed to be hidden stays there, and the back button successfully loops backwards, through each question.

Answer 1

This would be the usual way to do it:

var foodChoice;
var backBtn;
var nextBtn;
var questions = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
var currentQuestion = 0;

$(document).ready(function() {

  foodChoice = document.getElementsByName("food");
  backBtn = document.getElementById("backBtn");
  nextBtn = document.getElementById("nextBtn");

  

  //scrolling to next question

  $(nextBtn).click(function() {
    selectQuestion(currentQuestion+1);
  });

  // scrolling to previous question

  $(backBtn).click(function() {
    selectQuestion(currentQuestion-1);
  });

});

function selectQuestion(q) {
    currentQuestion = Math.min(Math.max(q, 0), questions.length - 1);
    if (currentQuestion == questions.length - 1) {
      nextBtn.style.display = "none";
      backBtn.style.display = "none";
    } else {
      var qu = document.querySelectorAll(".question");
      for (var que of qu)
        que.style.display = "none";
      document.getElementById(questions[currentQuestion]).style.display = "block";
    }

    backBtn.style.visibility = currentQuestion >= 1 ? "visible" : "hidden";
  }

.question {
  display: none;
}

#eight textarea {
  width: 100%;
  min-height: 20vh;
}

#one {
  display: block;
}

#backBtn {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question-box">

  <div class="progress-bar">

    <h3 id="percent">7%</h3>

  </div>

  <div id="one" class="question">
    <p>On a scale of 0-5, where 0 is not at all likely and 5 is extremely likely:</p>
    <p>How likely are you to recommend Classic Screenings Cinema to someone else?</p>
    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="two" class="question">
    <p>On a scale of 0-5, where 0 is not enjoyed it at all and 5 is enjoyed it a lot:</p>
    <p>How much did you enjoy the film/event you watched?</p>
    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="three" class="question">
    <p>On a scale of 0-5, where 0 is very unhelpful and 5 is very helpful:</p>
    <p>Overall, how helpful were the Classic Screenings staff?</p>
    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="four" class="question">
    <p>Did you purchase any food / snacks from the cinema?</p>
    <div class="yesOrNo">
      Yes<input class="yorn" type="radio" name="food" value="yes"> No
      <input class="yorn" type="radio" name="food" value="no">
    </div>
    <div id="food-followUp" class="question">
      <p>On a scale of 0-5, where 0 is very poor and 5 is excellent:</p>
      <p>What do you rate the quality of the food / snacks?</p>
      <div class="answer">

        <ul>
          <li>0</li>
          <li><input type="radio" name="rate" value="0"></li>
        </ul>

        <ul>
          <li>1</li>
          <li><input type="radio" name="rate" value="1"></li>
        </ul>

        <ul>
          <li>2</li>
          <li><input type="radio" name="rate" value="2"></li>
        </ul>

        <ul>
          <li>3</li>
          <li><input type="radio" name="rate" value="3"></li>
        </ul>

        <ul>
          <li>4</li>
          <li><input type="radio" name="rate" value="4"></li>
        </ul>

        <ul>
          <li>5</li>
          <li><input type="radio" name="rate" value="5"></li>
        </ul>
      </div>
    </div>
  </div>

  <div id="five" class="question">
    <p>Did you visit the toilet facilities during your visit to Clasic Screenins Cinema?</p>
    <div class="yesOrNo">
      Yes<input class="yorn" type="radio" name="yorn" value="yes"> No
      <input class="yorn" type="radio" name="yorn" value="no">
    </div>
    <div id="facilities-followUp" class="question">
      <p>On a scale of 0-5, where 0 is extremely dissatisfied and 5 is extremely satisfied, how would you rate the following:?</p>
      <p>Cleanliness of the toilet facilities</p>

      <div class="answer">

        <ul>
          <li>0</li>
          <li><input type="radio" name="rate" value="0"></li>
        </ul>

        <ul>
          <li>1</li>
          <li><input type="radio" name="rate" value="1"></li>
        </ul>

        <ul>
          <li>2</li>
          <li><input type="radio" name="rate" value="2"></li>
        </ul>

        <ul>
          <li>3</li>
          <li><input type="radio" name="rate" value="3"></li>
        </ul>

        <ul>
          <li>4</li>
          <li><input type="radio" name="rate" value="4"></li>
        </ul>

        <ul>
          <li>5</li>
          <li><input type="radio" name="rate" value="5"></li>
        </ul>

      </div>
    </div>


  </div>

  <div id="six" class="question">
    <p>On a scale of 0-5, where 0 is extremely dissatisfied and 5 is extremely satisfied, how would you rate the following:?</p>
    <p>The amount of time it took to purchase your ticket, factoring in any time with queuing?</p>

    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="seven" class="question">
    <p>With regards to entering the cinema screen and taking your allocated seat, please let us know how strong you agree with the following statements, with 0 representing strongly disagree and 5 representing strongly agree.</p>
    <p>My allocated seat was in great condition</p>

    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>

    <p>The area around my seat was clean and tidy</p>

    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate2" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate2" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate2" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate2" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate2" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate2" value="5"></li>
      </ul>

    </div>

  </div>

  <div id="eight" class="question">
    <p>Were there any disruptions that occured during the viewing of you movie / event?</p>
    <div class="yesOrNo">
      Yes<input class="yorn" type="radio" name="yorn" value="yes"> No
      <input class="yorn" type="radio" name="yorn" value="no">
    </div>

    <p class="disrupted">Please tell us more about the disruption and what staff did to handle this</p>
    <textarea></textarea>

  </div>

  <div id="nine" class="question">

    <h2>THANK YOU FOR COMPLETING OUR SURVEY!</h2>

    <p>We are very grateful towards you taking the time out to complete this survery.</p>

    <p>Every couple of months our team reflect on these surverys and we develop straregies on the best ways to deal with areas in which can do with improving, as well as ideas on how to further strengthen the positives.</p>

    <p>Once again, we thank you for filling in the survey and we hope to see you soon!</p>

  </div>


</div>

<div class="navigate">

  <div id="backBtn" class="back questionchoice">

    <h2>BACK</h2>

  </div>

  <div id="nextBtn" class="next questionchoice">

    <h2>NEXT</h2>

  </div>

</div>

Answer 2

Your issue is coming from your "BACK" button. It's because you are decrementing your counter before hiding the questions. So if you are on question X and you hit back, you will decrement your counter, and then hide counter and counter-1 which is really X-1 and X-2

Change your back button function to this - or just adjust your currentQuestion index calls to [currentQuestion+1] and [currentQuestion] to get the right index values.

  $(backBtn).click(function() {
    if (currentQuestion > 0) {
      document.getElementById(questions[currentQuestion]).style.display = "none";
      document.getElementById(questions[currentQuestion - 1]).style.display = "block";
    }

    currentQuestion--;

    if (currentQuestion === 0) {
      backBtn.style.visibility = "hidden";
    }
  });

$(document).ready(function() {

  var foodChoice = document.getElementsByName("food");
  var backBtn = document.getElementById("backBtn");
  var nextBtn = document.getElementById("nextBtn");
  var questions = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
  currentQuestion = 0;


  //scrolling to next question

  $(nextBtn).click(function() {
    currentQuestion++;

    if (currentQuestion == questions.length - 1) {
      nextBtn.style.display = "none";
      backBtn.style.display = "none";
    }

    if (currentQuestion >= 1) {
      backBtn.style.visibility = "visible";
    }

    if (currentQuestion < questions.length) {
      document.getElementById(questions[currentQuestion]).style.display = "block";
      document.getElementById(questions[currentQuestion - 1]).style.display = "none";
    }

  });


  // scrolling to previous question

  $(backBtn).click(function() {
    if (currentQuestion > 0) {
      document.getElementById(questions[currentQuestion]).style.display = "none";
      document.getElementById(questions[currentQuestion - 1]).style.display = "block";
    }
    currentQuestion--;

    if (currentQuestion === 0) {
      backBtn.style.visibility = "hidden";
    }


  });

})

.question {
  display: none;
}

#eight textarea {
  width: 100%;
  min-height: 20vh;
}

#one {
  display: block;
}

#backBtn {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question-box">

  <div class="progress-bar">

    <h3 id="percent">7%</h3>

  </div>

  <div id="one" class="question">
    <p>On a scale of 0-5, where 0 is not at all likely and 5 is extremely likely:</p>
    <p>How likely are you to recommend Classic Screenings Cinema to someone else?</p>
    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="two" class="question">
    <p>On a scale of 0-5, where 0 is not enjoyed it at all and 5 is enjoyed it a lot:</p>
    <p>How much did you enjoy the film/event you watched?</p>
    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="three" class="question">
    <p>On a scale of 0-5, where 0 is very unhelpful and 5 is very helpful:</p>
    <p>Overall, how helpful were the Classic Screenings staff?</p>
    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="four" class="question">
    <p>Did you purchase any food / snacks from the cinema?</p>
    <div class="yesOrNo">
      Yes<input class="yorn" type="radio" name="food" value="yes"> No
      <input class="yorn" type="radio" name="food" value="no">
    </div>
    <div id="food-followUp" class="question">
      <p>On a scale of 0-5, where 0 is very poor and 5 is excellent:</p>
      <p>What do you rate the quality of the food / snacks?</p>
      <div class="answer">

        <ul>
          <li>0</li>
          <li><input type="radio" name="rate" value="0"></li>
        </ul>

        <ul>
          <li>1</li>
          <li><input type="radio" name="rate" value="1"></li>
        </ul>

        <ul>
          <li>2</li>
          <li><input type="radio" name="rate" value="2"></li>
        </ul>

        <ul>
          <li>3</li>
          <li><input type="radio" name="rate" value="3"></li>
        </ul>

        <ul>
          <li>4</li>
          <li><input type="radio" name="rate" value="4"></li>
        </ul>

        <ul>
          <li>5</li>
          <li><input type="radio" name="rate" value="5"></li>
        </ul>
      </div>
    </div>
  </div>

  <div id="five" class="question">
    <p>Did you visit the toilet facilities during your visit to Clasic Screenins Cinema?</p>
    <div class="yesOrNo">
      Yes<input class="yorn" type="radio" name="yorn" value="yes"> No
      <input class="yorn" type="radio" name="yorn" value="no">
    </div>
    <div id="facilities-followUp" class="question">
      <p>On a scale of 0-5, where 0 is extremely dissatisfied and 5 is extremely satisfied, how would you rate the following:?</p>
      <p>Cleanliness of the toilet facilities</p>

      <div class="answer">

        <ul>
          <li>0</li>
          <li><input type="radio" name="rate" value="0"></li>
        </ul>

        <ul>
          <li>1</li>
          <li><input type="radio" name="rate" value="1"></li>
        </ul>

        <ul>
          <li>2</li>
          <li><input type="radio" name="rate" value="2"></li>
        </ul>

        <ul>
          <li>3</li>
          <li><input type="radio" name="rate" value="3"></li>
        </ul>

        <ul>
          <li>4</li>
          <li><input type="radio" name="rate" value="4"></li>
        </ul>

        <ul>
          <li>5</li>
          <li><input type="radio" name="rate" value="5"></li>
        </ul>

      </div>
    </div>


  </div>

  <div id="six" class="question">
    <p>On a scale of 0-5, where 0 is extremely dissatisfied and 5 is extremely satisfied, how would you rate the following:?</p>
    <p>The amount of time it took to purchase your ticket, factoring in any time with queuing?</p>

    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="seven" class="question">
    <p>With regards to entering the cinema screen and taking your allocated seat, please let us know how strong you agree with the following statements, with 0 representing strongly disagree and 5 representing strongly agree.</p>
    <p>My allocated seat was in great condition</p>

    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>

    <p>The area around my seat was clean and tidy</p>

    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate2" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate2" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate2" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate2" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate2" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate2" value="5"></li>
      </ul>

    </div>

  </div>

  <div id="eight" class="question">
    <p>Were there any disruptions that occured during the viewing of you movie / event?</p>
    <div class="yesOrNo">
      Yes<input class="yorn" type="radio" name="yorn" value="yes"> No
      <input class="yorn" type="radio" name="yorn" value="no">
    </div>

    <p class="disrupted">Please tell us more about the disruption and what staff did to handle this</p>
    <textarea></textarea>

  </div>

  <div id="nine" class="question">

    <h2>THANK YOU FOR COMPLETING OUR SURVEY!</h2>

    <p>We are very grateful towards you taking the time out to complete this survery.</p>

    <p>Every couple of months our team reflect on these surverys and we develop straregies on the best ways to deal with areas in which can do with improving, as well as ideas on how to further strengthen the positives.</p>

    <p>Once again, we thank you for filling in the survey and we hope to see you soon!</p>

  </div>


</div>

<div class="navigate">

	<div id="backBtn" class="back questionchoice">

		<h2>BACK</h2>

	</div>

	<div id="nextBtn" class="next questionchoice">

		<h2>NEXT</h2>

	</div>

</div>