Use same url but load different pages/screens

[konsarna]

Hello,
I am building a survey with meteor in the style of https://www.typeform.com/templates/t/self-evaluation/
that means that I have just one url where my survey will be routed

e.g. /experiment

and after each step(clicking buttons , answering to questions) a new page (meaning just one new question) will be loaded but within same url (/experiment) and not new or load the template in the end of the same page.
How can I manage to do this without creating multiple pages (html and js) and append them each time to different urls within FlowRouter but just use one? Also I just tried using separate templates html files within the main template/html file but still it just adds new template in the bottom of the page and not loading a new page
thank you in advance

[jamgold]

You could use {{>Template.dynamic template=stepTemplate data=stepData}} in the template for /experiment', wherestepTemplate` is a ReactiveVar that will contain the template names for the different steps. Here is an extremely simplified example how this could work (just edited a bit to make all parts play better)

Template.experiment.onCreated(function () {
  const instance = this;
  instance.step = new ReactiveVar('stepOne');
  instance.steps = {
    stepOne: {
      nextStep: 'stepTwo',
      title: 'Next Step',
      message: '<h2>This is the 1st step</h2>',
    },
    stepTwo: {
      nextStep: 'stepThree',
      title: 'One more Step',
      message: '<h2>This is the 2nd step</h2>',
    },
    stepThree: {
      message: '<h2>You did it, you finished all steps</h2>',
    },
  };
});
Template.experiment.helpers({
  stepTemplate() {
    return Template.instance().step.get();
  },
  stepData() {
    const instance = Template.instance();
    var step = instance.steps[instance.step.get()];
    // return the data the step template should receive
    return step;
  },
});
Template.experiment.events({
  'click button'(event, instance) {
    var nextStep = event.currentTarget.dataset.nextStep;
    instance.step.set(nextStep);
  },
});

And the templates could be

<template name="experiment">
 {{>Template.dynamic template=stepTemplate data=stepData}}
</template>
<template name="stepOne">
 <h1>Step One</h1>
  {{{message}}}
 {{#if nextStep}} <button data-next-step="{{nextStep}}">{{title}}</button>{{/if}}
</template>
<template name="stepTwo">
 <h1>Step Two</h1>
 {{{message}}}
 {{#if nextStep}} <button data-next-step="{{nextStep}}">{{title}}</button>{{/if}}
</template>
<template name="stepThree">
 <h1>Step Three</h1>
  {{{message}}}
 {{#if nextStep}} <button data-next-step="{{nextStep}}">{{title}}</button>{{/if}}
</template>

[konsarna]

Thank you so much for your instant help this is what I need to do
I run your example and I m working on my project the way you suggested!

[konsarna]

May I ask one more question, inside each step (page) I have radio buttons, dropbox lists which are filled one at a step by the user, what is the best way to catch the user input per template in an object and end up in an object containing all the user input given lets say three steps/pages?
I tried doing it within the

Template.experiment.events({
  'click button'(event, instance) {
    var nextStep = event.currentTarget.dataset.nextStep;
    instance.step.set(nextStep);
 options = {
            "question_1": $('input[name="question_1"]:checked').val(),
            "question_2": $('#question_2').val(),
  },
});

but is seems as it gets empty each time a new template is loaded so best way to do it is i believe use new reactive instances and create
Template.stepOne.events {()}
Template.stepTwo.events {()}

where I collect the feedback, am I right?

[jamgold]

You’ll just need to pass whatever you choose to the next template. I used the explicit data context

<template name="experiment">
  {{>Template.dynamic template=stepTemplate data=stepData}}
</template>

where I have a helper stepData that provides the required data for each step. Each step could save stuff into a global variable that gets passed to the next template