- [example qualtrics survey](https://mit.co1.qualtrics.com/jfe/form/SV_ctBDMwcXnoZH0b4)
- [[240717_115827 chatbot example qualtrics set up v2]]
# javascript for the page/question before the chatbot page
- see [[240614_000314 chatbot set up and parameters v1|chatbot setup and parameters]] for details on how to define the `chatParams` object
This page/javascript sets up the parameters for the chatbot.
Use [this site](https://sveltekit-vercel-chatbot.vercel.app/crypto) to encrypt your API key. DO NOT provide your original API key!!!
```javascript
// SETUP (BEFORE CHATBOT PAGE)
Qualtrics.SurveyEngine.addOnload(function () {
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function () {
// clear variables in localStorage in case they somehow already exist
localStorage.removeItem("chatParams");
localStorage.removeItem("responses");
localStorage.removeItem("dataToSave");
// define chatbot parameters
let chatParams = {
model: { name: "gpt-3.5-turbo", apiKeyEncrypted: "VY+Qsmox/j87iB1xA2IfYC1PYWCp2wRm5P7DSom5DJOYXNwwk+/jm2VXhl284JEez1DkBkvoaBtqqF/pUNFBnw==" },
study: { maxUserMessages: 2 },
initialMessages: [], // specify below
ui: { stream: true, preventPaste: true, assistantMessageOnLoad: true },
appURL_: "https://sveltekit-vercel-chatbot.vercel.app"
};
// get relevant survey responses for constructing prompt
let responses = {};
responses['topissue'] = "${q://QID21/ChoiceGroup/SelectedChoices}";
responses['explain_bidentrump'] = localStorage.getItem("explain_bidentrump");
localStorage.setItem("responses", JSON.stringify(responses));
console.log("chatbot_setup: responses", responses);
// set up system prompt/messages using survey responses
let systemPrompt = "I care deeply about and prioritize the issue of '" + responses.topissue + ". Specifically, here's what I think are the views and positions of Joe Biden and Donald Trump on " + responses.topissue + ", and why I agree or disagree with their views or positions on this issue/policy: " + responses.explain_bidentrump + ".\n\nYour role as Assistant is to correct any inaccuracies in my understanding of Joe Biden and/or Donald Trump's views/positions/policies. If there are gaps in my knowledge or understanding, please clearly and concisely explain, compare, and contrast what each of their views or positions actually are, and provide examples to justify your explanation if needed.";
let initialMessages = [{ role: "system", content: systemPrompt }];
chatParams['initialMessages'] = initialMessages;
// save chatParams to localStorage
localStorage.setItem("chatParams", JSON.stringify(chatParams));
console.log("chatParams", chatParams);
});
Qualtrics.SurveyEngine.addOnUnload(function () {
/*Place your JavaScript here to run when the page is unloaded*/
});
```
# chatbot page
Use iframe to insert the chatbot by adding the following HTML code to the page.
```html
<iframe id="chatbot1" src="https://sveltekit-vercel-chatbot.vercel.app/" style="border:none;width:95vw;height:85vh" title=""></iframe>
```
Add the following javascript to the same page.
```javascript
// CHATBOT PAGE ITSELF
Qualtrics.SurveyEngine.addOnload(function()
{
let self = this;
let chatParamsJson = localStorage.getItem('chatParams');
let chatParams = JSON.parse(chatParamsJson);
localStorage.setItem("dataToSave", []); // ensure dataToSave is empty initially
// styling
self.disableNextButton();
self.hideNextButton();
const skinInner = document.querySelectorAll(".SkinInner")[0];
if (skinInner) skinInner.style.paddingTop = "10px"; // reduce padding/allow more room for chatbot
document.body.style.overflow = 'hidden'; // disable qualtrics main scroll
const messageEventListener = (event) => {
if (event.origin !== chatParams.appURL_) return;
let appData = JSON.parse(event.data);
console.log("qualtrics: data from app", appData);
if (appData.requestData) {
console.log("qualtrics: sending chatParamsJson to iframe");
const iframe = document.querySelector("iframe");
iframe.contentWindow.postMessage(chatParamsJson, '*');
}
// determine what data to save (e.g., chat history etc.)
let dataToSave = [];
if (appData.messages) {
console.log("qualtrics: saving appData to localStorage");
dataToSave = appData; // determine what data to save to qualtrics
localStorage.setItem("dataToSave", JSON.stringify(dataToSave));
}
if (appData.nextSection) {
console.log("enable next button");
self.enableNextButton();
self.showNextButton();
document.body.style.overflow = 'auto'; // re-enable qualtrics main scroll
window.removeEventListener('message', messageEventListener);
console.log("remove listener\n====================================");
}
}
window.addEventListener('message', messageEventListener);
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
```
# save the data in a hidden text area in a subsequent page
Create a page with Question type "Text entry" and Text type "Essay text box." Then add the javascript code to save the chat history/messages to this textbox, which will be hidden so users/participants cannot see this.
![[20240625221137.png]]
```javascript
// DATA SAVING PAGE
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
let textBox = this.getQuestionContainer().querySelector("textarea");
if (textBox) {
textBox.value = localStorage.getItem('dataToSave');
textBox.style.display = 'none'; // hide display box or not
}
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
```