Transitioning from lab.js to OSWeb component on JATOS
Hello,
I am building an online experiment on JATOS with two components: one with lab.js and one built with OpenSesame. Once I exported this experiment and uploaded it to my JATOS server, the first component ran fine, but the second component didn't start. I read online that one must use the JS code "jatos.startNextComponent" for this, but I don't understand how and where to implement this. Could someone please explain to me how to make this transition between components work?
Thank you for your help!
Comments
Hi,
The first question here: https://forum.cogsci.nl/discussion/5468/integrating-osweb-as-a-jatos-component is (I think) exactly what you're asking. See my response immediately below that, and let me know if you need more help.
Different people asked related questions on that thread but don't get confused, in principle the first two posts should answer your question.
Hi Elisa,
Thank you so much for your quick response. This helps a lot, but I would just like to clarify something: where exactly should I modify the JS code in the first component (point 5 in your other thread)? Should it be under Component properties on JATOS, or in the actual lab.js experiment?
Thanks again! :)
You'd have to modify the actual script. I don't know how lab.js names its files, but it might be something like index.html (which will contain some embedded javascript)
OK thank you. I am very new to JS so I apologize in advance, but may I ask if just inserting jatos.startNextComponent at the end of my .html script will do the trick? Or are there other steps I need to take in order to incorporate this function properly? I've been having trouble finding this information on the web. Thank you so much for your help.
Hi,
No, inserting that line will not work.
You have to find in your HTML file a call to:
jatos.endStudy()and replace it with:
jatos.startNextComponent()If you are confused, paste the snippet of code that contains the endStudy function and I'll show you how to change it
Hi Elisa,
I'm writing in this thread as I'm facing the same problem. I'm writing an html file. In the head section I've inserted this code
Then, at end of my html file I've tried with this command:
<script>
jatos.onLoad(function () {
jatos.submitResultData(JSON.stringify(result.data),jatos.startNextComponent);
});
</script>
However, it's not working (i.e. it doesn't proceed to the next component).
Could you please explain how I should write the code correctly? Also, if I just want to use jatos.startNextComponent function, without jatos.submitResultData, how should I write it?
Sorry for the dumb question but I'm very new to programming!
Thank you very much
Cristina
Hi Cristina,
The code you posted looks fine. Do you get any error message in your browser's Developer Tools?
And if you don't want to submit any result data you can just use jatos.startNextComponent directly without calling jatos.submitResultData first.
So altogether it can look like:
<head> <script src="jatos.js"></script> </head> <script> jatos.onLoad(function() { // Start here with your code that uses jatos.js' variables and functions // Then in the end call 'jatos.startNextComponent' to go to the next component jatos.startNextComponent(); }); </script>If you need more information about how to start with writing studies for JATOS (I know our docs can be improved):
And of course the jatos.js reference:
Best,
Kristian
Hi Kri,
thanks for your reply!
No I don't get any error message, but it simply does not move on to the next component.
Now I've tried to incorporate the jatos.startNextComponent into a button with an onclick function. I tried these two scripts below but none of them worked. Can you spot any mistake?
<div id="info" style='visibility:hidden'>
<h3 id="info-h">Estimated viewing distance (cm): </h3>
<button class="btn btn-primary" onclick="NextComponent()">Continua</button>
</div>
</div>
<script>
jatos.onLoad(function (NextComponent) {
jatos.submitResultData(JSON.stringify(result.data), jatos.startNextComponent);
});
</script>
and
<div id="info" style='visibility:hidden'>
<h3 id="info-h">Estimated viewing distance (cm): </h3>
<button class="btn btn-primary" onclick="NextComponent()">Continua</button>
</div>
</div>
<script>
function NextComponent() {
jatos.submitResultData(JSON.stringify(result.data), jatos.startNextComponent);
});
</script>
Thanks!
Cristina
Hi Cristina,
Are you sure you didn't get any error message? On your browser, if you go to Developer Tools (e.g. On Chrome: View->Developer->Developer Tools) you should be able to see an error message in red
Best
Elisa
Hi Elisa,
thanks for your reply! Sorry, I didn't know about that. I've checked and it says that the variable NextComponent (see my last message) is not defined. Any tips on how do I develop it?
Of course my goal is to create a button that proceeds to the next component after you click it.
Thank you so much
Cristina
Hi all,
I've worked it out by inserting this code. I'm posting it just in case anyone else encounter my same problem!
<button class="btn btn-primary" onclick="NextComponent()">Continua</button>
<script>
function NextComponent() {
jatos.onLoad(function () {
jatos.startNextComponent();
});
}
</script>
That is one solution :)
My guess on why it did not work with a simple 'jatos.onLoad' is that the execution of your JavaScript never reached that point in your code. But to confirm I'd have to see your code. Anyway, with using a button you circumvent this :)