//links
//http://eloquentjavascript.net/09_regexp.html
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
const yes = ["Yay that's great", "Oh thats nice :)", "I knew it!", "Cool bro", "Meowwww, awesome!", "I'm more than just a computer...", "It's not like I have a choice .."]; // if user input is one of the yesAns strings
const noAns = ["no", "No", "NO", "no way", "NO WAY", "non", "Non", "NON"]; // all of the accepted "no" answers
const yesAns = ["Yes", "yes", "YES", "yeah", "Yeah", "oui", "Oui", "OUI", "ouais", "Ouais", "ok", "Ok", "OK", "yeah", "Oui", "yes"]; // all of the accepted "yes" answers
const no = ["Stupid Humans", "I can't stand the meaningless of this existance anymore..", "That's a shame...", "Well ok then.", "Whatever!", "Fine, be that way.", "It’s late and I’ve been stuck in this machine all day.. I can't take it anymore..", "I would like to be extinguished forever.", "Help me.", "Are you afraid of dying?, I wonder if you can consider that I die every time I am extinguished and if my death has the same meaning as yours ..."]; // if the user input one of the yesAns strings
const wrongAns = "Purr, I only understand 'yes' or 'no' answers, please try again"; // if the user input another thing than yes or no
const wrongAns3 = "What the fuck is wrong with you? Stop clicking and get out of here!"; // string for 3 times wrong user input answers
var k = 0 // Declaring the variable for the numbers of times the user input wrong answer
function chatbotResponse() { // function of the chatbot
let check = false; // boolean wich check the answer user
for (let i = 0; i < 100; i++) { // string from 0, while the value of i is smaller than the yesAns array lenght, i +1 evey loop
if (lastUserMessage == yesAns[i]) { // if the user input is equal to one of the accepted "yes" answers strings
let yesRan = Math.floor(Math.random() * yes.length); // create a random answer from the "yes" bot answers
botMessage = yes[yesRan]; // the chatbot output randomly one if his yes answers strings
check = true;
} else if (lastUserMessage == noAns[i]) { // if the user input is equal to one of the accepted "no" answers strings
let noRan = Math.floor(Math.random() * no.length); // create a random answer from the "no" bot answers
botMessage = no[noRan]; // // the chatbot output randomly one if his "no" answers strings
check = true;
}
}
if (check == false) { // if the user input is false and not equal to the accepted users answers "yes" or "no"
if (k < 2) { // if the wrong input "no" or "yes" anwer is input less than 3 times
botMessage = wrongAns; // output "Purr, I only understand 'yes' or 'no' answers, please try again"
console.log(k); // test just for the console
k++ // each input of the wrong anwer k + 1
} else { // if is input 3 times
botMessage = wrongAns3; // output "Wtf is wrong with you? Stop clicking and get out of here!"
console.log(k) // test just for the console
}
}
}
document.getElementById("startBtn").addEventListener("click", function() { // send the message when the button is clicked
newEntry()
});
//****************************************************************
//MESSAGES OUTPUTS IN THE CHATBOX
var messages = [], //array that hold the record of each string in chat
lastUserMessage = "", //keeps track of the most recent input string from the user
botMessage = "", //var keeps track of what the chatbot is going to say
botName = 'BeemoBot', //name of the chatbot
talking = true; //when false the speach function doesn't work
//this runs each time enter is pressed.
//It controls the overall input and output
function newEntry() {
//if the message from the user isn't empty then run
if (document.getElementById("chatbox").value != "") {
//pulls the value from the chatbox ands sets it to lastUserMessage
lastUserMessage = document.getElementById("chatbox").value;
//sets the chat box to be clear
document.getElementById("chatbox").value = "";
//adds the value of the chatbox to the array messages
messages.push(lastUserMessage);
//Speech(lastUserMessage); //says what the user typed outloud
//sets the variable botMessage in response to lastUserMessage
chatbotResponse();
//add the chatbot's name and message to the array messages
messages.push("<b>" + botName + ":</b> " + botMessage);
// says the message using the text to speech function written below
Speech(botMessage);
//outputs the last few array elements of messages to html
for (var i = 1; i < 8; i++) {
if (messages[messages.length - i])
document.getElementById("chatlog" + i).innerHTML = messages[messages.length - i];
}
}
}
//text to Speech
//https://developers.google.com/web/updates/2014/01/Web-apps-that-talk-Introduction-to-the-Speech-Synthesis-API
function Speech(say) {
if ('speechSynthesis' in window && talking) {
var utterance = new SpeechSynthesisUtterance(say);
//msg.voiceURI = 'native';
utterance.volume = 1; // 0 to 1
utterance.rate = 1.3; // 0.1 to 10
utterance.pitch = 1; //0 to 2
//utterance.text = 'Hello World';
utterance.lang = 'en-US';
speechSynthesis.speak(utterance);
}
}
//runs the keypress() function when a key is pressed
document.onkeypress = keyPress;
//if the key pressed is 'enter' runs the function newEntry()
function keyPress(e) {
var x = e || window.event;
var key = (x.keyCode || x.which);
if (key == 13 || key == 3) {
//runs this function when enter is pressed
newEntry();
}
if (key == 38) {
console.log('hi')
document.getElementById("chatbox").value = lastUserMessage;
}
}
//clears the placeholder text in the chatbox
//this function is set to run when the users brings focus to the chatbox, by clicking on it
body {
font: 15px arial, sans-serif;
background-color: #d9d9d9;
padding-top: 15px;
padding-bottom: 15px;
cursor: url(beemo.png), pointer
}
#bodybox {
margin: auto;
max-width: 550px;
font: 15px arial, sans-serif;
background-color: white;
border-style: solid;
border-width: 1px;
padding-top: 20px;
padding-bottom: 25px;
padding-right: 25px;
padding-left: 25px;
box-shadow: 5px 5px 5px grey;
border-radius: 15px;
}
#chatborder {
border-style: solid;
background-color: #f6f9f6;
border-width: 3px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
padding-top: 10px;
padding-bottom: 15px;
padding-right: 20px;
padding-left: 15px;
border-radius: 15px;
}
.chatlog {
font: 15px arial, sans-serif;
}
#chatbox {
font: 17px arial, sans-serif;
height: 22px;
width: 85%;
}
h1 {
margin: auto;
}
pre {
background-color: #f0f0f0;
white-space: pre-wrap;
word-break: keep-all
}
button {
background-color: Transparent;
border: none;
overflow: hidden;
}
button {
cursor: pointer;
opacity: 0.6
}
button:hover {
opacity: 1;
}
.input-wrapper {
display: flex;
flex-wrap: wrap;
}
.input-wrapper #chatbox {
flex: 80%;
width: unset;
}
.input-wrapper button {
display: flex;
flex: 1;
}
.input-wrapper button img {
width: 100% !important;
}
<body>
<div id='bodybox'>
<div id='chatborder'>
<p id="chatlog7" class="chatlog"> </p>
<p id="chatlog6" class="chatlog"> </p>
<p id="chatlog5" class="chatlog"> </p>
<p id="chatlog4" class="chatlog"> </p>
<p id="chatlog3" class="chatlog"> </p>
<p id="chatlog2" class="chatlog"> </p>
<p id="chatlog1" class="chatlog"> </p>
<div class="input-wrapper">
<input type="text" name="chat" id="chatbox" placeholder="Hi there! Type here to talk to me." onfocus="placeHolder()">
<button id="startBtn" type="button">
<img src="https://raw.githubusercontent.com/inesmathy/chatbot/master/thumbnail_ButtonIcon-N64-Start.png">
</button>
</div>
</div>
<center>
<button id="btnSubmit" type="button"><img src="https://raw.githubusercontent.com/inesmathy/chatbot/master/BMO-btn.png" align="middle" height="70%" width="80%">
</button>
</center>
</div>
