Participant Requests Help | XM Community
Question

Participant Requests Help

  • 22 May 2020
  • 1 reply
  • 23 views

Hello everyone,
I am currently creating an experiment through Qualtrics. In the experiment, participants will be solving anagrams (word puzzles). In addition, they will have the option to request for some help. We want participants to feel like someone is actually helping them. So if we present the anagram with a text entry question and followed by a question that said something like "Would you like some help, [your name]?" with the following options
->Yes
->No
What could I do to make participants feel like someone is messaging them with a text/string that entails a hint?
I'm guessing that code would be involved in this scenario...if anyone knows how to use JavaScript, you would be an amazing help!


1 reply

Userlevel 7
Badge +27

Hi there, if you still need, I think one way you could make it seem like there is a human conveying a helpful message would be to simulate a chat bot of sorts. I found a pretty neat implementation of this here by Tariq Siddiqui and the codepen is here. I tweaked it only slightly to make it display a little nicer within Qualtrics and to include the hint. Below is what it could look like:
ChatBotting.pngTo put in place, create 3 questions in the Builder:

  • A single line text entry for respondents to type the solved anagram

  • A single choice Multiple choice for respondents to indicate they need help

  • A Text/Graphic question to house the chatbot

Once the questions are created, add In-Page display logic so that the Text/Graphic question only displays if "Help" is selected in the Multiple Choice question.
Then, use the Rich Content Editor's HTML/Source view "<>" to update the question text of the Text/Graphic question with the below:
Hi there, do you need a hint? Type "yes" below to receive a hint.


 



Next, add the below to the question's JavaScript in the OnReady section:
// input options
const utterances = [
  ["ah", "yes", "ok", "okay", "nice"],
  ["no", "not sure", "maybe", "no thanks"],
  ["how are you", "how is life", "how are things"],
  ["hi", "hey", "hello", "good morning", "good afternoon"],
  ["what are you doing", "what is going on", "what is up"],
  ["how old are you"],
  ["who are you", "are you human", "are you bot", "are you human or bot"],
  ["who created you", "who made you"],
  ["your name please","your name","may i know your name","what is your name","what call yourself"],
  ["happy", "good", "fun", "wonderful", "fantastic", "cool"],
  ["bad", "bored", "tired"],
  ["help me", "tell me story", "tell me joke"],
  ["bye", "good bye", "goodbye", "see you later"],
  ["what should i eat today"],
  ["what", "why", "how", "where", "when"],
  [""],
  ["haha", "ha", "lol", "hehe", "funny", "joke"]
];

// Possible responses corresponding to triggers
const answers = [
  ["The hint is: One who stares at the moon"],
  ["That's ok", "What do you want to talk about?"],
  ["Fine... how are you?", "Pretty well, how are you?","Fantastic, how are you?"],
  ["Hello!", "Hi!", "Hey!", "Hi there!", "Howdy"],
  ["Nothing much","About to go to sleep","Can you guess?","I don't know actually"],
  ["I am infinite"],
  ["I am just a bot", "I am a bot. What are you?"],
  ["The one true God, JavaScript"],
  ["I am nameless", "I don't have a name"],
  ["Have you ever felt bad?", "Glad to hear it"],
  ["Why?", "Why? You shouldn't!"],
  ["What about?", "Once upon a time..."],
  ["Bye", "Goodbye", "See you later"],
  ["Pasta", "Burger"],
  ["Great question"],
  ["Please say something :("],
  ["Haha!", "Good one!"]
];

// Random for any other user input
const alternatives = [
  "Go on...",
  "Try again",
];

const inputField = document.getElementById("input");
inputField.addEventListener("keydown", (e) => {
  if (e.code === "Enter") {
    let input = inputField.value;
    inputField.value = "";
    output(input);
  }
});

function output(input) {
  let product;
  let text = input.toLowerCase().replace(/[^\\w\\s\\d]/gi, "");
  text = text
    .replace(/ a /g, " ")
    .replace(/whats/g, "what is")
    .replace(/please /g, "")
    .replace(/ please/g, "")
    .replace(/r u/g, "are you");

  if (compare(utterances, answers, text)) {
    // Search for exact match in triggers
    product = compare(utterances, answers, text);
  } 
  else {
    product = alternatives[Math.floor(Math.random() * alternatives.length)];
  }

  addChatEntry(input, product);
}

function compare(utterancesArray, answersArray, string) {
  let reply;
  let replyFound = false;
  for (let x = 0; x < utterancesArray.length; x++) {
    for (let y = 0; y < utterancesArray[x].length; y++) {
      if (utterancesArray[x][y] === string) {
        let replies = answersArray[x];
        reply = replies[Math.floor(Math.random() * replies.length)];
        replyFound = true;
        break;
      }
    }
    if (replyFound) {
      break;
    }
  }
  return reply;
}

function addChatEntry(input, product) {
  const messagesContainer = document.getElementById("messages");
  let userDiv = document.createElement("div");
  userDiv.id = "user";
  userDiv.className = "user response";
  userDiv.innerHTML = ''+input+'';
  messagesContainer.appendChild(userDiv);

  let botDiv = document.createElement("div");
  let botText = document.createElement("span");
  botDiv.id = "bot";
  botDiv.className = "bot response";
  botText.innerText = "Typing...";
  botDiv.appendChild(botText);
  messagesContainer.appendChild(botDiv);

  messagesContainer.scrollTop =
    messagesContainer.scrollHeight - messagesContainer.clientHeight;

  setTimeout(() => {
    botText.innerText = product;
  }, 2000);
}
Finally, add the below CSS to the Style section of the survey's Look & Feel:
* {
  box-sizing: border-box;
}

html {
height: 100%;
}

body {
  font-family: 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, Helvetica,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
background-color: silver;
height: 100%;
margin: 0;
}

span {
padding-right: 15px;
padding-left: 15px;
}

.container {
display: flex;
  justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}

.chat {
height: 300px;
width: 100%;
display: flex;
flex-direction: column;
  justify-content: center;
align-items: center;


::-webkit-input-placeholder { 
color: .711 
}
 
input { 
border: 0; 
padding: 15px; 
margin-left: auto;
border-radius: 10px; 
}

.messages {
display: flex;
flex-direction: column;
overflow: scroll;
height: 90%;
width: 100%;
background-color: white;
padding: 15px;
margin: 15px;
border-radius: 10px;
}

#bot {
margin-right: auto;
}

#user {
margin-left: auto;
}

.bot {
font-family: Consolas, 'Courier New', Menlo, source-code-pro, Monaco,  
monospace;
}

.avatar {
height: 25px;
}

.response {
display: flex;
align-items: center;
margin: 1%;
}

/* Mobile */
@media only screen and (max-width: 980px) {
  .container {
flex-direction: column; 
justify-content: flex-start;
}
.chat {
width: 75vw;
margin: 10vw;
}
}
To edit the respondent inputs that will trigger a response, as well as the responses, edit the "utterances" and "answers" variables as needed. The order of utterances corresponds to the order of the answers, like in the below:
ChatBotting2.png

Leave a Reply