admin管理员组文章数量:1323381
I need help with a little Javascript. I want to display two images on Qualtrics but after a 5 second delay.
To be more clear, Image2 should display after 5 seconds of Image1 being displayed.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your Javascript Below This Line*/
});
I need help with a little Javascript. I want to display two images on Qualtrics but after a 5 second delay.
To be more clear, Image2 should display after 5 seconds of Image1 being displayed.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your Javascript Below This Line*/
});
Share
Improve this question
edited Jan 7, 2015 at 18:54
655321
4214 silver badges26 bronze badges
asked Jul 31, 2012 at 7:32
Sheikha AliaSheikha Alia
191 silver badge1 bronze badge
3
- I have no idea about Java. I need it so as to get my research through. – Sheikha Alia Commented Aug 1, 2012 at 6:06
- Great! btw java != javascript at all – shershen Commented Aug 1, 2012 at 6:39
- Oh! I am sorry. You see this is how dumb I am when it es to these things. That's why, I asked for help here. – Sheikha Alia Commented Aug 1, 2012 at 7:09
2 Answers
Reset to default 4You actually don't need Javascript to do this. In Qualtrics you can add a "Timing" question to auto-advance the participant after 5 seconds. Here's how:
- Insert the 1st image you want to display
- Add a Timing question (set the auto-advance option on the right to "5" for 5 seconds)
- Insert a Page Break after the Timing question
- Insert the 2nd image you want to display after the Page Break
That should do it. If you have any more questions, just ask us at [email protected]
Thanks for using Qualtrics. Share the love on Facebook and Twitter @qualtrics
-Qualtrics Team
This is a modification of the timer on the Qualtrics site:
http://www.qualtrics./university/researchsuite/coders-corner/html-and-css#displaytimer
A few notes:
- I wasn't sure if you wanted to have the first image disappear as the second one appears, but that's the behavior that you'll get with this JavaScript.
- I left the countdown just to illustrate relationship between the timing and the images appearing and disappearing.
- Just in case it's not entirely clear. The code for the images I used would have to be replaced by the links you get from your own Qualtrics image library. So img src="https://yourorghere.qualtrics./CP..." would be replaced by whatever your organizations url at Qualtrics is
This is the CSS:
.pic2 {
display: none;
}
Image 1:
This is the html:
Time: <span id="time1">30</span><br>
<img src="https://yourorghere.qualtrics./CP/Graphic.php?IM=IM_bCpAC12YW14vbtq" style="width: 133px; height: 115px;" class='pic1' />
Add this javascript replacing the default Qualtrics JavaScript:
started = false;
function countDown1() {
if (!started)
started = true;
else {
var value1 = parseInt($('time1').innerHTML);
$('time1').innerHTML = value1 - 1;
if (value1 == 26) {
var styling1 = document.getElementsByClassName('pic1')[0];
styling1.style.display = "none";
}
}
setTimeout(countDown1, 1000);
}
Event.observe(window, 'load', countDown1);
Image 2:
This is the html:
Time: <span id="time2">30</span><br>
<img src="https://yourorghere.qualtrics./CP/Graphic.php?IM=IM_4Vjre9FrrbA828s" style="width: 117px; height: 107px;" class='pic2' />
The JavaScript that replaces the default Qualtrics JavaScript:
started = false;
function countDown2() {
if (!started)
started = true;
else {
var value2 = parseInt($('time2').innerHTML);
$('time2').innerHTML = value2 - 1;
if (value2 == 25) {
var styling2 = document.getElementsByClassName('pic2')[0];
styling2.style.display = "block";
}
}
setTimeout(countDown2, 1000);
}
Event.observe(window, 'load', countDown2);
本文标签: Javascript for QualtricsStack Overflow
版权声明:本文标题:Javascript for Qualtrics - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742121666a2421735.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论