@ghrwf704 (kei yosi)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

IE11でチャットボットを動かしたい

解決したいこと

自社の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

1Answer

Comments

  1. @ghrwf704

    Questioner

    ありがとうございます。
    無事解決に至りました。

Your answer might help someone💌