someone help with my choose your own adventure

partimenerd · April 3

Can someone explain to me what's wrong with this choose your own adventure code?

I asked Claude (AI), to write me the HTML for a choose your own adventure site, this is that it came up with:

<html><head>
<title>Choose Your Own Adventure</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 10px;
}
</style>
</head>
<body>
<h1>Choose Your Own Adventure</h1>
<div id="storyBox">
<p>You wake up in a dark forest. It's nighttime, and you can barely see anything around you. What do you do?</p>
<button onclick="choiceA()">Look for a way out of the forest</button>
<button onclick="choiceB()">Stay put and wait for daylight</button>
</div>

<script>
function choiceA() {
document.getElementById("storyBox").innerHTML = "<p>You start walking through the forest, trying to find a way out. After a while, you come across a small cabin. Do you:</p><button onclick='endA()'>Investigate the cabin</button><button onclick='endB()'>Keep moving through the forest</button>";
}

function choiceB() {
document.getElementById("storyBox").innerHTML = "<p>You decide to wait for daylight. As the sun rises, you realize you're not far from a small town. Do you:</p><button onclick='endC()'>Head towards the town</button><button onclick='endD()'>Stay in the forest</button>";
}

function endA() {
document.getElementById("storyBox").innerHTML = "<p>You approach the cabin and peek through the window. Inside, you see a group of people sitting around a table, playing cards. They seem friendly enough. You decide to knock on the door and introduce yourself.</p><p>The End</p>";
}

function endB() {
document.getElementById("storyBox").innerHTML = "<p>You continue walking through the forest, hoping to find a way out. After a few hours, you come across a small stream. You decide to follow the stream, which eventually leads you out of the forest and back to civilization.</p><p>The End</p>";
}

function endC() {
document.getElementById("storyBox").innerHTML = "<p>You head towards the town, hoping to find help or directions. As you enter the town, you realize it's abandoned and in ruins. You decide to keep moving, hoping to find a more prosperous settlement.</p><p>The End</p>";
}

function endD() {
document.getElementById("storyBox").innerHTML = "<p>You decide to stay in the forest, feeling more at home in the wilderness than in civilization. You build a small shelter and start foraging for food, living off the land.</p><p>The End</p>";
}
</script>

</body></html>

The button functions don't work, but I see the results are coded in. Do any of you guys know how to fix it? If you could plug it in yourself and edit it for me I would really appreciate it. I've learned a bit about HTML but I am still an amateur.

Thank you!

Sign In

someone help with my choose your own adventure

Recommended Posts

partimenerd

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity