search

cse110-sp23-group3 / 8-ball

0 stars 0 forks source link

AI Experiment #7

Open nsyousef opened 1 year ago

nsyousef commented 1 year ago

This is not really something we need to add to the app. I was just playing around with ChatGPT to see what it could do. This may be something to bring up in our presentation when we talk about the benefits and limitations of ChatGPT.

I gave ChatGPT the following prompt:

Generate a magic 8-ball website using html, css, and javascript. The website should have a text box where the user can input a question. The user should then click on an image of an 8-ball to submit the question. The 8-ball should shake and magical sounding music should play for 2 seconds before the answer is shown on the screen. The answer should be chosen randomly from a pool of standard magic 8 ball answers.

ChatGPT responded with the following:

I'm sorry, as an AI language model, I cannot create a full website with a graphical user interface. However, I can provide you with the code for a basic Magic 8-ball game that can be run in the console of a web browser.

It then proceeded to create a Magic 8 Ball app much like the ones we've seen in class and generated ourselves. It generated three separate files: an HTML file, a CSS file, and a Javascript file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Magic 8-ball</title>
  </head>
  <body>
    <label for="question">Ask the Magic 8-ball a question:</label>
    <input type="text" id="question">
    <button onclick="submitQuestion()">Submit</button>
    <br><br>
    <div id="response"></div>
  </body>
</html>
body {
  font-family: Arial, sans-serif;
}

label {
  font-weight: bold;
}

input[type="text"] {
  padding: 5px;
  margin-right: 10px;
}

button {
  padding: 5px 10px;
  background-color: #007bff;
  border: none;
  color: #fff;
  cursor: pointer;
}

#response {
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
}
const responses = [
  "It is certain",
  "It is decidedly so",
  "Without a doubt",
  "Yes – definitely",
  "You may rely on it",
  "As I see it, yes",
  "Most likely",
  "Outlook good",
  "Yes",
  "Signs point to yes",
  "Reply hazy, try again",
  "Ask again later",
  "Better not tell you now",
  "Cannot predict now",
  "Concentrate and ask again",
  "Don't count on it",
  "Outlook not so good",
  "My sources say no",
  "Very doubtful"
];

function submitQuestion() {
  const question = document.getElementById("question").value;
  if (question.trim() === "") {
    alert("Please enter a question");
    return;
  }
  const response = getRandomResponse();
  showResponse(response);
}

function getRandomResponse() {
  const index = Math.floor(Math.random() * responses.length);
  return responses[index];
}

function showResponse(response) {
  const responseDiv = document.getElementById("response");
  responseDiv.innerText = "The Magic 8-ball says: " + response;
}

It then said:

To play the game, you can copy and paste the HTML, CSS, and JavaScript code into separate files and open the HTML file in a web browser. The user can input a question into the text box and click the "Submit" button to receive a response from the Magic 8-ball. The response is chosen randomly from a pool of standard Magic 8-ball responses.

I noticed it made a few errors. It labelled the HTML file as a PHP file:

Screenshot 2023-04-22 at 11 29 29 PM

It also did not include any statements linking the HTML, CSS, and Javascript files. Nor did it contain instructions on how to link those files together. It just said to copy and paste the HTML, CSS, and Javascript code into 3 separate files and open the HTML file in a web browser.

Another thing I noticed is, unlike the other apps which required the question in the text box to end in a question mark, this one just checked to make sure the text box was not empty. It did not check for a question mark. The styling was also much more basic than the other two Magic 8-ball apps that were generated, although it did put in some effort.

nsyousef commented 1 year ago

I asked the following follow-up question to ChatGPT:

In the app you just created, make it so mystical music plays when the "Submit" button is clicked.

Here is its response:

To add mystical music to the Magic 8-ball app, we can use the HTML5 Audio element and play a sound effect when the "Submit" button is clicked. Here's the modified JavaScript code:

const responses = [
  "It is certain",
  "It is decidedly so",
  "Without a doubt",
  "Yes – definitely",
  "You may rely on it",
  "As I see it, yes",
  "Most likely",
  "Outlook good",
  "Yes",
  "Signs point to yes",
  "Reply hazy, try again",
  "Ask again later",
  "Better not tell you now",
  "Cannot predict now",
  "Concentrate and ask again",
  "Don't count on it",
  "Outlook not so good",
  "My sources say no",
  "Very doubtful"
];

function submitQuestion() {
  const question = document.getElementById("question").value;
  if (question.trim() === "") {
    alert("Please enter a question");
    return;
  }

  // play mystical music
  const audio = new Audio('mystical_music.mp3');
  audio.play();

  // wait for 2 seconds before showing the response
  setTimeout(() => {
    const response = getRandomResponse();
    showResponse(response);
  }, 2000);
}

function getRandomResponse() {
  const index = Math.floor(Math.random() * responses.length);
  return responses[index];
}

function showResponse(response) {
  const responseDiv = document.getElementById("response");
  responseDiv.innerText = "The Magic 8-ball says: " + response;
}

In this modified code, we first create a new Audio object that loads and plays the mystical_music.mp3 file. We then use setTimeout to delay the display of the response by 2 seconds, giving the music time to play.

Make sure to replace mystical_music.mp3 with the filename of your own mystical music file.

That time, at least it gave complete instructions for how to get the code working. I don't think ChatGPT could generate the audio file though. That we would need to supply ourselves (and we may need to modify the code if it is not in .mp3 format). We may be able to start with a baseline app using ChatGPT and then tell it to add features to expand its capabilities after it generates the baseline version. That might work better than giving it all the specs in one query.

nsyousef commented 1 year ago

I tried adding some more features to it. Sometimes, you can just copy-paste the new code and it works fine. Other times, though, it makes mistakes and the new code it generates is not compatible with the existing code. I asked it to add an 8-ball image, then to apply a specific color scheme to the app. It did these tasks fine and all I had to do was copy-paste the code. But when I asked it to add an animation to make the 8-ball shake, it modified the code to assume a function called playMysticalMusic(); existed to play the music, when it did not. Simple copy-pasting the code did not work, although it can probably be fixed with a little fiddling of the code.