Food Choose-Your-Own Adventure

Developer
Lauren
Size
3,174 Kb
Views
22,264
  1. Food Choose-Your-Own Adventure Previews
  2. Food Choose-Your-Own Adventure HTML Codes
  3. Food Choose-Your-Own Adventure CSS Codes
  4. Food Choose-Your-Own Adventure JS Codes

How do I make an food choose-your-own adventure?

What is a food choose-your-own adventure? How do you make a food choose-your-own adventure? This script and codes were developed by Lauren on 18 September 2022, Sunday.

Food Choose-Your-Own Adventure Previews
IQ Test

Food Choose-Your-Own Adventure - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Food Choose-Your-Own Adventure</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <h1>Food Adventure</h1> <div id="prompt"></div> <div id="options"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Food Choose-Your-Own Adventure - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
* { margin: 0px; padding: 0px; color: #32363F; font: 18px 'Open Sans', sans-serif; border: none; outline: none; box-sizing: border-box;
}
html { display: table; width: 100%; height: 100%;
}
body { display: table-cell; background: #32363F; vertical-align: middle;
}
#wrapper { margin: 40px; background: #D6C2A3; width: calc(100% - 80px);
}
h1 { display: block; padding: 20px 20px 12px; font: 700 36px 'Open Sans', sans-serif; background: #E84949; color: #FAFAFA; text-transform: uppercase;
}
#prompt { padding: 20px;
}
#prompt p { padding-bottom: 8px;
}
#prompt p b { font-weight: 700;
}
#options { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0px 20px 28px; text-align: center;
}
#options button { margin: 0px 8px; padding: 8px 20px; background: #C2AE8F; width: 100%; cursor: pointer;
}
#options button:hover,
#options button:active { background: #E84949; color: #FAFAFA;
}

Food Choose-Your-Own Adventure - Script Codes JS Codes

// Contains the story and paths
var story = { intro: { prompt: 'It is 12am and you are starving. It\'s too late to order delivery. You know what that means.', options: [{ name: 'Fight', path: 'choose_weapon' }, { name: 'Starve', path: 'die_starve' }] }, choose_weapon: { prompt: 'Choose your weapon!', options: [{ name: 'Knife', path: 'die_cut' }, { name: 'Toaster', path: 'toast' }] }, toast: { prompt: 'You toast some bread. What do you do next?', options: [{ name: 'Eat it!', path: 'eat' }, { name: 'Slather on some peanut butter!', path: 'peanut_butter' }] }, peanut_butter: { prompt: 'There is now peanut butter on your bread. Excellent choice. What do you do next?', options: [{ name: 'Eat it!', path: 'eat' }, { name: 'Throw it away', path: 'die_starve' }] }, eat: { prompt: 'It was delicious! You are no longer hungry.', options: [{ name: 'Start Again', path: 'intro' }] }, die_cut: { prompt: 'You accidentally cut yourself and bleed to death.', options: [{ name: 'Start Again', path: 'intro' }] }, die_starve: { prompt: 'You have died of hunger!', options: [{ name: 'Start Again', path: 'intro' }] }
}
/** * Chosen option is an object with properties {name, path} */
function display_scenario(chosen_option) { var option_name = chosen_option.name; var option_path = chosen_option.path; var scenario = story[option_path]; // Clear the #prompt div and the #options div $('#prompt').empty(); $('#options').empty(); // Create a <p> to display what the user has chosen if option_name is not null and append it to the #prompt <div> if (option_name) { $('<p>').html('You have chosen <b>' + option_name + '</b>').appendTo('#prompt'); } // Append the scenario's prompt $('<p>').html(scenario.prompt).appendTo('#prompt'); // Append the options into the #options <div> // We want to loop through all the options and create buttons for each one. A regular for-loop would not suffice because adding a button is not asynchronous. We will create an asynchronous loop by using recursion function add_option_button(index) { if (index === scenario.options.length) { // Base case return; } var option = scenario.options[index]; // Create a <button> for this option and append it to the #options <div> $('<button>') .html(option.name) .click(function(e) { // This is an onclick handler function. It decides what to do after the user has clicked on the button. // First, prevent any default thing that the button is going to do, since we're specifying our own action for the button e.preventDefault(); // We'll want to call display_scenario() with this option display_scenario(option); }) .appendTo('#options'); // Add the next option button add_option_button(index + 1); } add_option_button(0);
}
// This function waits until the document is ready
$(document).ready(function() { // Start the story display_scenario({ name: null, path: 'intro' });
});
Food Choose-Your-Own Adventure - Script Codes
Food Choose-Your-Own Adventure - Script Codes
Home Page Home
Developer Lauren
Username phantomesse
Uploaded September 18, 2022
Rating 3.5
Size 3,174 Kb
Views 22,264
Do you need developer help for Food Choose-Your-Own Adventure?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lauren (phantomesse) Script Codes
Name
Image Slider
Which Language Spinner
Simple Dropdown Menu
Custom Dropdown Menu
URL Parameter Extractor
Text Search
CSS Flashcard
Thumbnail Example
Dropdown Menu
Hover Buttons
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!