limesurvey/embed.html 2021-05-06
Embed webpage in Limesurvey
You can embed a web page in Limesurvey. The web page can even be a jspsych experiment that returns data and saves this data in the limesurvey database. The following script can be added to the html of a Array(Texts) question that is the only question in a question group.
Line 5 removes all Limesurvey text from your screen. The whole screen will be available for your experiment.
The data returned by the experiment that is referred to in line 11 will be copied in the short text field. There is an demo of this method in the Demo: AX-CPT survey.
<script defer>
// remove limesurvey content
//document.getElementsByClassName("content")[0].style.display = "none" // limesurvey 2
document.getElementById("dynamicReloadContainer").style.display = "none" // limesurvey 3
// white pixel as background image
document.body.style.backgroundImage = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAA'+
'l21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=)'
// show experimental content
iframe = document.createElement("iframe")
iframe.setAttribute("src", "https://exp.socsci.ru.nl/demo/")
iframe.style.overflow = "hidden"
iframe.style.width = document.documentElement.clientWidth + "px"
iframe.style.height = document.documentElement.clientHeight + "px"
iframe.style.border = 0
document.body.appendChild(iframe)
// react to experiments data
// child must call window.parent.postMessage([{iTrial: 0, condition: "AX", response: "target"}], "*")
window.addEventListener("message", function(e) {
var data = e[e.message ? "message" : "data"]
console.log("data escaping iframe:")
console.log(data)
// for array of texts with x subquestions iTrial, condition and response
// iterate over each column of data in the survey
$('[id^="answer"]').filter('[id$="iTrial"]').each(function(i) {
try{
this.value = data[i].iTrial
} catch(e){ console.log("") } // data is shorter than limesurvey array, leaving the catch block empty causes error
})
$('[id^="answer"]').filter('[id$="condition"]').each(function(i) {
try{
this.value = data[i].condition
} catch(e){ console.log("") }
})
$('[id^="answer"]').filter('[id$="response"]').each(function(i) {
try{
this.value = data[i].response
} catch(e){ console.log("") }
})
//document.getElementById("movenextbtn").click() // proceed to next question group
document.getElementById("ls-button-submit").click() // finish, limesurvey 3
}, false)
</script>
