Q:

Separating list into divs to show only one at a time

My question is on seperating a list of Questions into seperate divs (using javascript/html/c#). How the program works at the moment is there is a main view for the quiz, which displays the content section and once completed hides that partial and shows the quiz partial view. 
Currently this displays all the questions in order formatted like so
(imagine a quiz with only 2 questions)
Q#1
-(multiple choice)
-
Previousbtn      NextBtn
Q#2
-(multiple choice)
-
Previousbtn      Finish
What i'm trying to do is display only one question at a time by (presumably) seperating each question into its own div and showing/hiding them as needed (on btn click of Next or previous).
I've hit a wall yesterday afternoon and today so anygeneral guidance would be appreciated.
Thanks

A:

For the Previous Next functions you can use the same as Aren, but to answer the question posted, about separating a list use the following
You would have the same script as mentioned

    var index = 0;
    var n = $("div.quiz-container").length;
    var a = n - 1

     $(".quiz-container:first").addClass("active").show();
    if (index == 0) {
      $("#prev").prop("disabled", true);
    }
    $("#next").on("click", function() {
      index++;
      $(".quiz-container.active").removeClass('active').hide();
      $(".quiz-container").eq(index).addClass('active').show();
      if (index == 0) {
        $("#prev").prop("disabled", true);
      } else if (index != 0) {
        $("#prev").prop("disabled", false);
      }
      if (index != a) {
        $("#next").prop("disabled", false);
      } else if (index == a) {
        $("#next").prop("disabled", true);
      }
    });
    $("#prev").on("click", function() {
      index--;
      $(".quiz-container.active").removeClass('active').hide();
      $(".quiz-container").eq(index).addClass('active').show();
      if (index == 0) {
        $("#prev").prop("disabled", true);
      } else if (index != 0) {
        $("#prev").prop("disabled", false);
      }
      if (index != a) {
        $("#next").prop("disabled", false);
      }
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quiz-container active">
  <p>Q: Question 1?</p>
  <ul>
    <li>choice1</li>
    <li>choice2</li>
    <li>choice3</li>
    <li>choice4</li>
  </ul>
</div>

<div class="quiz-container" style="display:none">
  <p>Q: Question 2?</p>
  <ul>
    <li>choice1</li>
    <li>choice2</li>
    <li>choice3</li>
    <li>choice4</li>
  </ul>
</div>

<div class="quiz-container" style="display:none">
  <p>Q: Question 3?</p>
  <ul>
    <li>choice1</li>
    <li>choice2</li>
    <li>choice3</li>
    <li>choice4</li>
  </ul>
</div>

<button id="prev">Previous</button>
<button id="next">Next</button>

But in your view's foreach loop you would have:
foreach (var question in model.quiz) { 
 <div class="quiz-container">
      <h1>@question.QuestionTitle</h1>
      <ul>
           foreach (var answer in question.Answers) {
           <li>@answer</li>
           }
      </ul>
 </div>
 }

<button id="next">Next</button>
<button id="prev">Previous</button>

So you can have a varied amount of answers and varied amount of question. Hope this helps.
P.S you need to edit the code according to your model

