Open nsyousef opened 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.
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.
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:
ChatGPT responded with the following:
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:
It then said:
I noticed it made a few errors. It labelled the HTML file as a PHP file:
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.