add a calculator on the page so that subjects can use it to do some calculation manually? | XM Community
Solved

add a calculator on the page so that subjects can use it to do some calculation manually?

  • 19 October 2018
  • 13 replies
  • 167 views
S
Badge +2
Hi guys,

I want to add a calculator to a few survey pages so that participants of this survey can use it to do some calculations. The calculator should have a user-interface display. Can anyone advice how I can do that?

Thank you for your help!

Best,
Sherry
icon

Best answer by TomG 22 October 2018, 19:53

View original

13 replies

PeeyushBansal
Rank
Userlevel 7
Badge +33
You can check code at below link

https://stackoverflow.com/questions/15100124/calculator-with-javascript
Best Regards, Peeyush
TomG
Rank
Userlevel 7
Badge +27
@Sherry,

You can probably integrate this calculator into your survey questions:
http://www.keith-wood.name/calculator.html
S
Badge +2
@TomG @bansalpeeyush29

Thanks, guys for your help! I checked both documents yet still found it not work within Qualtircs.. If any chances, could you give me a step-by-step tutorial on how to add the calculator in Qualtrics?

Based on Tom's answer, here is what I have so far:

I put below code under the 'head' part of Qualtircs:

`<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>`


I put below code under the 'add customized CSS' part:

<link rel="stylesheet" type="text/css" href="css/jquery.calculator.css">
<script type="text/javascript" src="js/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery.calculator.js"></script>

I add this code to the questions where I want to show the calculator:

``$(selector).calculator({showOn: 'button'});``

Thank you!
TomG
Rank
Userlevel 7
Badge +27
> @Sherry said:
> I put below code under the 'head' part of Qualtircs:
>
> `<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>`

You don't need this. Qualtrics already includes jQuery.

> I put below code under the 'add customized CSS' part:
>
> <link rel="stylesheet" type="text/css" href="css/jquery.calculator.css">
> <script type="text/javascript" src="js/jquery.plugin.js"></script>
> <script type="text/javascript" src="js/jquery.calculator.js"></script>

This has to go in the header and you need full urls. I couldn't find a cdn with the files, so you'll need to copy them to your own webserver or upload to Qualtrics. Also, the download button on the site didn't work, so you have to navigate to the files (domain is keith-wood.name) and save them.

> I add this code to the questions where I want to show the calculator:
>
> ``$(selector).calculator({showOn: 'button'});``
>
You have to attach the calculator to a Qualtrics text input:
```
jQuery("#"+this.questionId"+" .InputText").calculator();
```
Just to show it works in Qualtrics:
https://marketinview.ca1.qualtrics.com/jfe/preview/SV_6DpkG9CUkSvjK5L?Q_SurveyVersionID=current&Q_CHL=preview
S
Badge +2
@TomG

Hi Tom, thanks a million for your help! Sorry for my stupidiness yet I am still struggling with the CSS part.

I understand the full URL issue you mentioned. However, I fail to find where I can upload the related files to Qualtircs.. I do not know how I can copy them to my own webserver and then use them in Qualtircs.. Could you share how you make it?

Or can you share the marketinview survey with sherryfu0315@gmail.com so that I can take a look at the source code you used?

Thanks!
TomG
Rank
Userlevel 7
Badge +27
> @Sherry said:
> @TomG
>
> Hi Tom, thanks a million for your help! Sorry for my stupidiness yet I am still struggling with the CSS part.
>
> I understand the full URL issue you mentioned. However, I fail to find where I can upload the related files to Qualtircs.. I do not know how I can copy them to my own webserver and then use them in Qualtircs.. Could you share how you make it?

You can upload files to Qualtrics by going to Library/Files Library/Upload a new file.

If you copy them to your own server then you would just change the urls to where you uploaded the files, for example:
```
<link rel="stylesheet" type="text/css" href="https://yourdomain.com/css/jquery.calculator.css">
<script type="text/javascript" src="https://yourdomain.com/js/jquery.plugin.js"></script>
<script type="text/javascript" src="https://yourdomain.com/js/jquery.calculator.js"></script>
```
S
Badge +2
@TomG

Thank you so much, Tom!

I got a domain from wix.com and the address is: https://sherryfu03159.wixsite.com/mysite-3/files

I uploaded three related files to this page, and get the URLs like below:

<link rel="stylesheet" type="text/css" href="https://wixlabs---dropbox-folder.appspot.com/dropbox/view?cacheKiller=1540126552772&compId=comp-jniy1xm8¤cy=USD&deviceType=desktop&height=432&instance=88ph9dLzs6s_k4J-kIgnuXrMjG4h7YwzXJtweV7wTWk.eyJpbnN0YW5jZUlkIjoiMTNiOWIwZDktZTkwNy00YWNiLWE5ZTctZDhkMGE5YmIxY2YwIiwiYXBwRGVmSWQiOiIxNDkyNDg2NC01NmQ1LWI5NGItMDYwZi1jZDU3YmQxNmNjMjYiLCJtZXRhU2l0ZUlkIjoiYTBlM2M1ZDItMGY5YS00YTg0LTg2MzEtMDUwMTMxNTAzZjlmIiwic2lnbkRhdGUiOiIyMDE4LTEwLTIyVDAzOjE0OjQ4LjQxN1oiLCJ1aWQiOm51bGwsImlwQW5kUG9ydCI6IjcyLjc3LjIuNDUvMzM2OTYiLCJ2ZW5kb3JQcm9kdWN0SWQiOm51bGwsImRlbW9Nb2RlIjpmYWxzZSwiYWlkIjoiMGQwNTM3ZmMtYzkwOS00NDM5LWI3NDMtMDllNmI4YjAyYmQ5IiwiYmlUb2tlbiI6ImIzNWE3NTBiLWU2OWQtMDA0Zi0yZmQ2LWRkZDE5OGViMjM2ZiIsInNpdGVPd25lcklkIjoiY2JkNTMyMzUtYjAxOC00ZTRjLTk1OTgtNjRhY2I0OWE0NzFlIn0&locale=en&pageId=lfuzf&tz=America%2FNew_York&viewMode=site&width=576&file=%2Fcalculator%2Fjquery.calculator.css&token=">


<script type="text/javascript" src="https://wixlabs---dropbox-folder.appspot.com/dropbox/view?cacheKiller=1540126552772&compId=comp-jniy1xm8¤cy=USD&deviceType=desktop&height=432&instance=88ph9dLzs6s_k4J-kIgnuXrMjG4h7YwzXJtweV7wTWk.eyJpbnN0YW5jZUlkIjoiMTNiOWIwZDktZTkwNy00YWNiLWE5ZTctZDhkMGE5YmIxY2YwIiwiYXBwRGVmSWQiOiIxNDkyNDg2NC01NmQ1LWI5NGItMDYwZi1jZDU3YmQxNmNjMjYiLCJtZXRhU2l0ZUlkIjoiYTBlM2M1ZDItMGY5YS00YTg0LTg2MzEtMDUwMTMxNTAzZjlmIiwic2lnbkRhdGUiOiIyMDE4LTEwLTIyVDAzOjE0OjQ4LjQxN1oiLCJ1aWQiOm51bGwsImlwQW5kUG9ydCI6IjcyLjc3LjIuNDUvMzM2OTYiLCJ2ZW5kb3JQcm9kdWN0SWQiOm51bGwsImRlbW9Nb2RlIjpmYWxzZSwiYWlkIjoiMGQwNTM3ZmMtYzkwOS00NDM5LWI3NDMtMDllNmI4YjAyYmQ5IiwiYmlUb2tlbiI6ImIzNWE3NTBiLWU2OWQtMDA0Zi0yZmQ2LWRkZDE5OGViMjM2ZiIsInNpdGVPd25lcklkIjoiY2JkNTMyMzUtYjAxOC00ZTRjLTk1OTgtNjRhY2I0OWE0NzFlIn0&locale=en&pageId=lfuzf&tz=America%2FNew_York&viewMode=site&width=576&file=%2Fcalculator%2Fjquery.plugin.js&token="></script>


<script type="text/javascript" src="https://wixlabs---dropbox-folder.appspot.com/dropbox/view?cacheKiller=1540126552772&compId=comp-jniy1xm8¤cy=USD&deviceType=desktop&height=432&instance=88ph9dLzs6s_k4J-kIgnuXrMjG4h7YwzXJtweV7wTWk.eyJpbnN0YW5jZUlkIjoiMTNiOWIwZDktZTkwNy00YWNiLWE5ZTctZDhkMGE5YmIxY2YwIiwiYXBwRGVmSWQiOiIxNDkyNDg2NC01NmQ1LWI5NGItMDYwZi1jZDU3YmQxNmNjMjYiLCJtZXRhU2l0ZUlkIjoiYTBlM2M1ZDItMGY5YS00YTg0LTg2MzEtMDUwMTMxNTAzZjlmIiwic2lnbkRhdGUiOiIyMDE4LTEwLTIyVDAzOjE0OjQ4LjQxN1oiLCJ1aWQiOm51bGwsImlwQW5kUG9ydCI6IjcyLjc3LjIuNDUvMzM2OTYiLCJ2ZW5kb3JQcm9kdWN0SWQiOm51bGwsImRlbW9Nb2RlIjpmYWxzZSwiYWlkIjoiMGQwNTM3ZmMtYzkwOS00NDM5LWI3NDMtMDllNmI4YjAyYmQ5IiwiYmlUb2tlbiI6ImIzNWE3NTBiLWU2OWQtMDA0Zi0yZmQ2LWRkZDE5OGViMjM2ZiIsInNpdGVPd25lcklkIjoiY2JkNTMyMzUtYjAxOC00ZTRjLTk1OTgtNjRhY2I0OWE0NzFlIn0&locale=en&pageId=lfuzf&tz=America%2FNew_York&viewMode=site&width=576&file=%2Fcalculator%2Fjquery.calculator.js&token="></script>

I used those in the header... However, it does not work :s I know those URLs look wierd.. Does the error due to the domain I used? Wix.com does not allow users to upload css/js files directly. I can only upload the files via Dropbox and embede the dropbox on the webpage..

Do you have further suggestions?

Thank you!
TomG
Rank
Userlevel 7
Badge +27
@Sherry - If I paste those urls into a browser they look fine. I think I would have opted to upload them to Qualtrics instead, but I don't think the files are your problem.

Have you added your JavaScript to text entry question and what does it look like?
S
Badge +2
@TomG

Morning! Thanks for the quick reply. I do not think I can upload js files into Qualtrics' library. It returns that 'the file you uploaded is not allowed'. Have you successfully done that?

!

!

Those are captures I have from my current Qualtrics survey.
TomG
Rank
Userlevel 7
Badge +27
Can you post a preview link?
S
Badge +2
@TomG

Yes, here we go: https://pitt.co1.qualtrics.com/jfe/preview/SV_bC2CEA8zk6vyEHb?Q_SurveyVersionID=current&Q_CHL=preview

Thanks for not giving me up yet..:p
TomG
Rank
Userlevel 7
Badge +27
Sherry,

I just looked at your preview link. When you added the scripts to your header you didn't use source mode (<>), so your tags were converted to html entities. For example, < got converted to `<`. That's why you see the lines that should load the css and scripts when you preview the survey.
S
Badge +2
@TomG

wow it works now after I did what you said!! It is soooo kind of you. Thank you so much for your help!

Leave a Reply


Terms & Conditions