- This topic has 5 replies, 2 voices, and was last updated 3 years, 2 months ago by
.
-
Posts
-
Hello everyone,
I’ve been trying to embed an HTML doc in one of the trials in my experiment using newHTML() , but all of the info I’ve been able to find seems to be out of date (and some of it was marked obsolete). This page says the HTML doc needs to be in the chuck_inlcudes folder, which I haven’t been able to find. And this page mentioned the same method, but it was marked as obsolete, and there was no info in the new tutorial about how to do this. I tried including the HTML script in the scripts folder, but it gave me errors as it seemed to be expecting js even though my file had a .html extension. Is there a new method to embed HTML docs in the experiment?
Best,
DawsonHello Dawson,
Thank you for pointing out the outdated reference on the documentation page, I will update it. On the PCIbex Farm, the folder chunk_includes appears as Resources, that’s where you should upload your HTML file
Best,
JeremyHi Jeremy,
Thanks for your help! Even in the new folder my HTML doc is still throwing up errors, including “Expected an identifier and instead saw “<“” and “Missing “;” before statement”, which makes me think it’s still not expecting HTML. And when I try to run the experiment, it just skips over the trial with the embedded html. Any idea why this is happening? Thanks again!
Here’s my code btw. I’m still pretty new to PCIbex, so there might just be an obvious error somewhere.
HTML doc<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <iframe src="https://i.simmer.io/@DawsonHarwood/~1a8230be-98ad-ef2b-1f39-89d288ba7f0b" style="width:960px;height:600px"> </iframe> </body> </html>Trial syntax
newTrial( newHtml("test", "test.html", getHtml("test") ) )Did you remove the copy of your HTML file that you had previously uploaded to Scripts? Also make sure that the name of the file you uploaded to Resources is exactly test.html and not, for example, test.html.js or Test.html or test.htm.
There are a few problems with your trial: the command newHtml takes up to 2 arguments maximum, where the first is the name you want to give that element, and the second is the filename of the HTML document you want to include. In the code you posted, you are passing a third parameter, getHtml("test"), which is just a reference to that same element. Also, remember from the tutorial that you need to do things with elements, in particular you need to explicitly tell your script to print them where you want that to happen. Finally, you also want to hold script execution until your participant interacts with the page somehow, for example until they click on a button.
Here’s a possible implementation:
newTrial( newHtml("test", "test.html") .print() , newButton("Continue") .print() .wait() )By the way, I see that your HTML document attempts to include an iframe that points to an external website. This is not recommended, as it can introduce security breaches, or simply not work at all (depending on how browsers handle cross-domain iframes).
Jeremy
Hi Jeremy,
Thanks so much for your help and the advice! I know iframes aren’t ideal, but as far as I can find there isn’t another way to do what I’m trying to do. Basically, the tasks that I’m trying to have my participants complete were too complex for me to create directly in PCIbex, which is why I’m hosting them on an external site and embedding them here. The main problem I’m facing is that I don’t want my participants to be able to advance in the experiment until they complete each task, but there’s no way for Ibex to know when the embedded task is completed. I had the idea to check the color of the canvas the task is embedded in (it’s white once they’ve completed the task), but there seems to be something wrong with my implementation since the button isn’t appearing. Is what I’m trying to do realistic in Ibex? Or do you think I need to find a different way to host the experiment? Thanks again for your help!
newTrial( "trial_1" , newPalette("MyPalette") , newCanvas("MyCanvas") .print() , newHtml("test", "test.html") .print("MyCanvas") , newButton("Continue" , "Continue") .wait() , newFunction("Checker" , () => { Palette.test.color("MyCanvas", "white");}) .test.is(true) .success( getButton("Continue").print(475,300)) .failure( getFunction("Checker").call()) )Hi Dawson,
I am unclear on what you are using the Palette element for, especially since there’s no documentation for this element. Also, this is not how test commands work: they are PennController commands, not boolean javascript functions.
I suspect that some element inside your HTML document turns white at some point, and you are trying to capture that change by using the Palette and Canvas elements, which are PennController elements. PennController elements are not HTML elements, and more particularly, creating a Canvas (PennController) element will not give you access to a <canvas> HTML element, even less so if the latter is embedded inside an iframe embedded in an HTML document.
If the task you are currently injecting through the Html element is the first screen of your experiment, I suggest you simply direct your participants to that page first, and insert a link at the end of your task that will direct them to your PCIbex experiment then. If it takes place in the middle of your experiment, I suggest you just insert a new-tab link pointing to your task’s page at that point, and maybe have your participants retrieve a code at the end of it that they will need to enter back into your PCIbex experiment in order to proceed.
Jeremy
- You must be logged in to reply to this topic.