This is an example of using AI to help write code. In this example we are practicing counting a random amount of emojis.
You can view the code here.
For more details see my resource document at: https://bit.ly/curts-aicode
Generate HTML and/or JavaScript code that can be embedded within a Google Sites website that does the following:
Randomly generate a number between 1 and 10.
Display a line of smiley face emojis where the quantity of emojis is equal to the number that was randomly selected.
Provide an input box for the user to type a number into, and a submit button for them to click.
If the number they enter is the same as the randomly generated number, then display "Correct" below the input box, and start the process over with a new random number.
If the number they enter is not the same as the randomly generated number, then display "Incorrect - Try Again" below the input box and allow them to submit a new number until they get the answer right. When they do get the answer right then display "Correct" below the input box, and start the process over with a new random number.
<!DOCTYPE html>
<html>
<head>
<title>Smiley Face Guessing Game</title>
</head>
<body>
<h1>Smiley Face Guessing Game</h1>
<div id="smileys"></div>
<input type="text" id="guess" />
<button id="submit">Submit</button>
<p id="feedback"></p>
<script>
var randomNumber = Math.floor(Math.random() * 10) + 1;
var smileys = "";
for (var i = 0; i < randomNumber; i++) {
smileys += "😿";
}
document.getElementById("smileys").innerHTML = smileys;
document.getElementById("submit").addEventListener("click", function() {
var guess = document.getElementById("guess").value;
if (guess == randomNumber) {
document.getElementById("feedback").innerHTML = "Correct!";
randomNumber = Math.floor(Math.random() * 10) + 1;
smileys = "";
for (var i = 0; i < randomNumber; i++) {
smileys += "😿";
}
document.getElementById("smileys").innerHTML = smileys;
} else {
document.getElementById("feedback").innerHTML = "Incorrect - Try Again";
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Emoji Counting Game</title>
<style>
.emojis {
font-size: 30px;
margin-bottom: 10px;
}
.feedback {
font-size: 18px;
color: red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="emojis" id="emojis"></div>
<input type="number" id="answer" placeholder="Enter number here">
<button onclick="checkAnswer()">Submit</button>
<div class="feedback" id="feedback"></div>
<script>
var correctNumber = 0;
function generateEmojis() {
correctNumber = Math.floor(Math.random() * 10) + 1;
var emojiString = "😀".repeat(correctNumber);
document.getElementById('emojis').innerText = emojiString;
document.getElementById('answer').value = '';
document.getElementById('feedback').innerText = '';
}
function checkAnswer() {
var userAnswer = document.getElementById('answer').value;
if (parseInt(userAnswer, 10) === correctNumber) {
document.getElementById('feedback').innerText = 'Correct!';
setTimeout(generateEmojis, 1000); // generate new emoji line after 1 second
} else {
document.getElementById('feedback').innerText = 'Incorrect - Try Again';
}
}
generateEmojis(); // generate initial emoji line
</script>
</body>
</html>