You can check code at below link



https://stackoverflow.com/questions/15100124/calculator-with-javascript

---

@Sherry,



You can probably integrate this calculator into your survey questions:

http://www.keith-wood.name/calculator.html

---

@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!

---

> @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

---

@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!

---

> @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>

```

---

@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!

---

@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?

---

@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.

---

Can you post a preview link?

---

@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

---

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.

---

@TomG



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

---