Problems getting Iron Router to work on my project

Question

I'm trying to create a quiz app on Meteor and have had trouble setting up Iron Router forever. I'll try to give a visual:

This is the front page: Image 1

When a user clicks on the button shown above, I want the first question to show up, whose contents are filled from MongoDB.

Image 2

This is what my router looks like ("question" is the name of the question template, as seen in image 2):

Router.route("/quiz/:_id", {
  name: "question",
  data: function(){
        return Quiz.findOne(this.params._id);}

});

Now, in order for me to get from image 1 to image 2, I have to use a mongo object _id in the html file.

<template name="main">
  <div class="jumbotron">
    <h2>
      Welcome to Simple Meteor Quiz app!
    </h2>
    <p>
      To try it out, simply click "start" below!
    </p>
    <p>
      <a class="btn btn-primary btn-large" href="/quiz/cieLkdzvGZPwrnZYE">Start</a>
    </p>
  </div>
</template>

When I click "Next Question" on image 2 to go onto the 2nd question, it doesn't work. I don't know how to make this process dynamic.

The way it looks to me right now is that I physically have to create a new route for every single question, which would look really ugly really quickly.

Any way to help implement Iron Router in this scenario? I read Discover Meteor and thought I fully understood how Iron Router works, but the more I try to fix this, the more I get confused.

Edit:

To solve my dilemma, I simple created a helper function which I could place behind the /quiz/ in the main template to lead me to the quiz question, based on a suggestion by Michel Floyd.

So the helper ends up looking like this:

Template.main.helpers({
  nextQuestion: function(){
    queue = Quiz.find().fetch();
    return queue[0]._id;
  }
});

Then attached to the URL like this:

<a class="btn btn-primary btn-large" href="/quiz/{{nextQuestion}}">Start</a>

Basically just spit out the first _id of first item in the array by making the collection an array via find().fetch(). Will probably randomize the _id at a later time.

Answer 1

You need a way for each template to know what the next question is. For example you can add a nextQuestionId key to your Quiz object. Then your template can be:

<template name="main">
  <div class="jumbotron">
    <h2>
      Welcome to Simple Meteor Quiz app!
    </h2>
    <p>
      To try it out, simply click "start" below!
    </p>
    <p>
      <a class="btn btn-primary btn-large" href="/quiz/{{nextQuestionId}}">
        Start
      </a>
    </p>
  </div>
</template>