Solved
Embedding an HTML-Based Game
Hello! First, I want to preface my (first-ever) post with the declaration that I am a relative newcomer in terms of both HTML and JavaScript. As such, I apologize in advance for any clarifications I will inevitably ask while seeking assistance! On to the problem:
Akin to the query asked in this thread, I am looking to embed an HTML-based game directly into a Qualtrics question. While I am capable of embedding an image that links to a new window containing the game, I need to be able to restrict participants' time with the game using the Page Timer feature. As I understand it, any requisite JavaScript libraries would need to be included in the Header of the survey, and any HTML would go in the Source of the question.
For some additional background, I originally attempted to embed a game from htmlgames.com - specifically, Cube Crash (about a third of the way down that list), and was met with the error "ERROR: Please provide a 'game' argument!" This brings us back to my disclaimer - I am unsure as to what causes that error because of my limited experience with JavaScript. Further, when attempting to add the JavaScript directly to the header of my survey, I'm informed that I can't use the document.write function (which, as I understand it, replaces everything previously existent on the page with the game). I'm unsure how/if I can edit that out.
I think that's the bulk of my issue. If anyone has any advice on how to tackle this issue or alternative solutions, I would greatly appreciate the help. Thanks!
Best answer by Anonymous
Hello @SomervilleC ,
Rather than using embed you can use iframe and in src attribute pass the url of the game.
Here I have used htmlgames.com fishing trip.
Steps to do are as follows:
1. Add the following code in the rich content editor(HTML View) of the descriptive text question
!
2. Add the following code in the look& feel -> advanced -> add custom css
#NextButton {
display:none;
}
.resp-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Image:
!
3. Preview the survey and the output is shown in the image below:
!
Note: On just changing the src of iframe from htmlgames.com , you can create different embedded html games.
Here is the preview Link
Please find the attached qsf file.
2. Add the following code in the look& feel -> advanced -> add custom css
#NextButton {
display:none;
}
.resp-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Image:
!
3. Preview the survey and the output is shown in the image below:
!
Note: On just changing the src of iframe from htmlgames.com , you can create different embedded html games.
Here is the preview Link
Please find the attached qsf file.Hello @SomervilleC ,
Rather than using embed you can use iframe and in src attribute pass the url of the game.
Here I have used htmlgames.com fishing trip.
Steps to do are as follows:
1. Add the following code in the rich content editor(HTML View) of the descriptive text question
!
2. Add the following code in the look& feel -> advanced -> add custom css
#NextButton {
display:none;
}
.resp-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Image:
!
3. Preview the survey and the output is shown in the image below:
!
Note: On just changing the src of iframe from htmlgames.com , you can create different embedded html games.
Here is the preview Link
Please find the attached qsf file.
2. Add the following code in the look& feel -> advanced -> add custom css
#NextButton {
display:none;
}
.resp-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Image:
!
3. Preview the survey and the output is shown in the image below:
!
Note: On just changing the src of iframe from htmlgames.com , you can create different embedded html games.
Here is the preview Link
Please find the attached qsf file.Hello,
I have a related question - I'm wondering what languages can be used to embed a game or simulation in a Qualtrics survey. So far, I understand that games can be coded in Javascript or html games can be embedded with an iFrame. Can you share all possible languages that could be used to embed a game into a Qualtrics survey? I'm wondering what languages I need to have the games/simulations coded in so I can record game scores in Qualtrics datasets without providing the code to users (the way Javascript does). A key concern is that I don't want survey participants seeing code behind the games/simulations. Javascript exposes the entire code. Any suggestions on using another language that works with Qualtrics?
Thank you!
Hi all,
I have a related question. I tried the above code and it worked for the above link. I have a game that is built in HTML, JS, and CSS. Is there a way to put this in qualtrics without web hosting it somewhere? If so, where does the CSS go in qualtrics if the HTML goes in the question and the JS goes in look and feel?
> @abbygirlrose said:
> Hi all,
> I have a related question. I tried the above code and it worked for the above link. I have a game that is built in HTML, JS, and CSS. Is there a way to put this in qualtrics without web hosting it somewhere? If so, where does the CSS go in qualtrics if the HTML goes in the question and the JS goes in look and feel?
CSS is written in "Custom CSS" present under Style tab in look and feel option.
Thanks. I am still having some issues: when I put my HTML in the question, CSS in the 'custom CSS' and JS in the add JS editor. The template shows up but not the moving bits.
Sign up
Already have an account? Login
Welcome! To join the Qualtrics Experience Community, log in with your existing Qualtrics credentials below.
Confirm your username, share a bit about yourself, Once your account has been approved by our admins then you're ready to explore and connect .
Free trial account? No problem. Log in with your trial credentials to join.
No free trial account? No problem! Register here
Already a member? Hi and welcome back! We're glad you're here 🙂
You will see the Qualtrics login page briefly before being taken to the Experience Community
Login with Qualtrics
Welcome! To join the Qualtrics Experience Community, log in with your existing Qualtrics credentials below.
Confirm your username, share a bit about yourself, Once your account has been approved by our admins then you're ready to explore and connect .
Free trial account? No problem. Log in with your trial credentials to join. No free trial account? No problem! Register here
Already a member? Hi and welcome back! We're glad you're here 🙂
You will see the Qualtrics login page briefly before being taken to the Experience Community
Login to the Community
Welcome! To join the Qualtrics Experience Community, log in with your existing Qualtrics credentials below.
Confirm your username, share a bit about yourself, Once your account has been approved by our admins then you're ready to explore and connect .
Free trial account? No problem. Log in with your trial credentials to join.
No free trial account? No problem! Register here
Already a member? Hi and welcome back! We're glad you're here 🙂
You will see the Qualtrics login page briefly before being taken to the Experience Community
Login with Qualtrics
Welcome! To join the Qualtrics Experience Community, log in with your existing Qualtrics credentials below.
Confirm your username, share a bit about yourself, Once your account has been approved by our admins then you're ready to explore and connect .
Free trial account? No problem. Log in with your trial credentials to join. No free trial account? No problem! Register here
Already a member? Hi and welcome back! We're glad you're here 🙂
You will see the Qualtrics login page briefly before being taken to the Experience Community
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.