CODEWITHSUNDEEP
javascriptjquerymongodbmeteor
Matty
Matty

Reputation: 283

Paginate in Meteor With Next Button

I am trying to learn Meteor. I have two files below, one HTML and the other my main.js. The problem is that I only want to display one question at a time. I want to be able to press the next button (and alternatively a previous button) to get to the next question.

My plan (which didn't work out) was to wrap the inside of the questions template in a div that attaches to a next button. The problem is that I don't know how to index my MongoDB records and show which on I am currently on. Any thoughts would be helpful!

My MongoDB records: 

0{_id: "XRvr9os2vtf77kKBB", question: "When was the war of 1812", answer: "1812", choices: ["1811", "1812", "1814", "1816"]}

1{_id: "zkkWkEEPws2M7pmY4", question: "When was the Declaration of Independence Written?", answer: "1776", choices: ["1776", "1779", "1789", "1804"]}

My main.js: 

  if (Meteor.isClient) {

Template.box.helpers({

    'explanation': function() {
        return Session.get('explanation')

    }


})

Template.questions.helpers({
    'helpme': function() {
        return questionsList.find()
    }

});
Template.questions.events({

    'click .options': function(li) {

        result = $(li.target).text();
        var notquite = "try again!";
        result = result.trim()

        $(li.currentTarget).css("font-size", "3em").css("background-color", "red").css("opacity", "0.6");
        Session.set('explanation', notquite)


        var something = questionsList.find({
            answer: result
        }).fetch()[0].answer;



        var patontheback = "Good Job!"

        $(li.currentTarget).css("font-size", "3em").css("background-color", "lightgreen");

        Session.set('explanation', patontheback);

    }

})
}

if (Meteor.isServer) {

};

And my HTML:

<head>
    <title> Coding CS Fundamentals Practice</title>
</head>

<body>
    <span style="padding-left: 5%; color: darkgreen; ">
    {{> loginButtons}}
  </span>
    <hr>
    <h1>Interview Practice</h1>
    <br>
    <div class="main-body">

      <div style="border: 2px solid gray">
      {{> questions}}
      </div>
      {{> box}}
    </div>


</body>

<template name="questions">


    {{#each helpme}}
    <span class="titlequestion" >

  <li class="titlequestion"> {{question}}</li>

    </span>

     {{#each choices}}

    <div class="listout">
      <hr>  <li class="options"  id="#total"> {{this}} </li><hr>

    </div>

    {{/each}} {{/each}}
<button class="add-question">NEXT</button>


</template>


<template name="box">
  <div id="why">  {{explanation}} </div>


</template>

Upvotes: 1

Views: 97

Answers (1)

Vinay Prabhakaran
Vinay Prabhakaran

Reputation: 773

You will need to use a reactive table to populate your result collection. Please go through this link, this table handles pagination and customizing rows per page. https://github.com/aslagle/reactive-table

Upvotes: 2

Related Questions