IE11でチャットボットを動かしたい
Q&A
Closed
解決したいこと
自社のFAQをチャットボットに搭載して運用しようと考えています。
社内の都合で、全社的にIE11を使用しているのでチャットボットもIE11で動かす必要があるのですが、以下に示すjavascriptのコードが動きません。
javascriptに詳しい方、IE11でも動作するように以下のコードを修正いただけないでしょうか。
よろしくおねがいします。
該当するソースコード
const chat = {
1: {
text: "こんにちは!お困りですか?",
options: [
{
text: "なにこれ?",
next: 2
}
]
},
2: {
text: "Peekobotというスクリプトを紹介する記事です。Peekobotはシンプルな選択式チャットボットフレームワークです",
next: 3
},
3: {
text:
"ユーザーに選択してもらう形で成り立つ対話コンテンツで、目的の場所への誘導を促します",
options: [
{
text: "よくわかった!",
next: 4
},
{
text: "ちょっと何言ってるか分からない",
next: 5
}
]
},
4: {
text:
"頭いいですね!簡単なものなので質問も簡単なものくらいしか出来ません。詳しくはGithubをご覧ください",
next: 7
},
5: {
text: "サンドイッチマン好きですか?",
next: 6
},
6: {
text: "サンドイッチマンの動画を紹介しますね",
options: [
{
text: "サンドの公式Youtubeへどうぞ!",
url:
"https://www.youtube.com/playlist?list=PLe8FGQbLGisnnab5M-2o88p4SAKPVb1RV"
}
]
},
7: {
text: "ライセンスはMITとのことです",
options: [
{
text: "GitHubへ",
url: "https://github.com/peekobot/peekobot"
}
]
}
};
const bot = function() {
const peekobot = document.getElementById("peekobot");
const container = document.getElementById("peekobot-container");
const sleep = function(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
};
const scrollContainer = function() {
container.scrollTop = container.scrollHeight;
};
const insertNewChatItem = function(elem) {
container.insertBefore(elem, peekobot);
scrollContainer();
//debugger;
elem.classList.add("activated");
};
const printResponse = async function(step) {
const response = document.createElement("div");
response.classList.add("chat-response");
response.innerHTML = step.text;
insertNewChatItem(response);
await sleep(1500);
if (step.options) {
const choices = document.createElement("div");
choices.classList.add("choices");
step.options.forEach(function(option) {
const button = document.createElement(option.url ? "a" : "button");
button.classList.add("choice");
button.innerHTML = option.text;
if (option.url) {
button.href = option.url;
} else {
button.dataset.next = option.next;
}
choices.appendChild(button);
});
insertNewChatItem(choices);
} else if (step.next) {
printResponse(chat[step.next]);
}
};
const printChoice = function(choice) {
const choiceElem = document.createElement("div");
choiceElem.classList.add("chat-ask");
choiceElem.innerHTML = choice.innerHTML;
insertNewChatItem(choiceElem);
};
const disableAllChoices = function() {
const choices = document.querySelectorAll(".choice");
choices.forEach(function(choice) {
choice.disabled = "disabled";
});
return;
};
const handleChoice = async function(e) {
if (!e.target.classList.contains("choice") || "A" === e.target.tagName) {
return;
}
e.preventDefault();
const choice = e.target;
disableAllChoices();
printChoice(choice);
scrollContainer();
await sleep(1500);
if (choice.dataset.next) {
printResponse(chat[choice.dataset.next]);
}
// Need to disable buttons here to prevent multiple choices
};
const init = function() {
container.addEventListener("click", handleChoice);
printResponse(chat[1]);
};
init();
};
bot();
0 likes
