I used buttons instead of input fields for the options since making the user input their choices gets pretty annoying. The object is a map of path id (e.g. ‘intro’, ‘choose_weapon’) to a scenario object.
Custom / Styled prompt window?
I’m trying to make a ‘Choose your Adventure’ game, and I want to know if it’s possible to make a styled/custom ‘Prompt’ window, and if it can be not opened up as a ‘prompt’ window, but have the prompt and user input in a selected HTML box? This is what I mean. If my HTML has
HTML
CSS
and JavaScript (I probably will mess up the code)
JavaScript
var prompt = document.getElementByClassName("prompt"); var choice = prompt("What is your choice? CHOICE1, CHOICE2, or CHOICE3?").toUpperCase(); prompt.innerHTML = choice;
and I hope to get something like the prompt not showing up a dialogue window but instead putting the prompt text into the textarea, and the user put in their choice with the input, then submit it by the submit button. How could I get it so that the prompt window instead outputs the question/text to the textarea , and the user puts in their answer via the input text field, and submitting it via the input submit button, and it works like normal. Is this even possible? If not, is it at least possible to style the prompt dialogue box itself? Here’s my code so far.
In my adventure game example, I used a JSON object to contain my story and its paths. The story object is a map of path id (e.g. ‘intro’, ‘choose_weapon’) to a scenario object. This helps to organize your story.
I used buttons instead of input fields for the options since making the user input their choices gets pretty annoying.
// 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 */ 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
to display what the user has chosen if option_name is not null and append it to the #prompt if (option_name) < $('
').html('You have chosen ' + option_name + '').appendTo('#prompt'); > // Append the scenario's prompt $('
').html(scenario.prompt).appendTo('#prompt'); // Append the options into the #options // 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 for this option and append it to the #options $('') .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' >); >);
Learn to create your custom prompt dialog in JS, with HTML for layout & CSS for appearance. Duration: 14:45
Design javascript’s default prompt box
i want to get a value from user with use of JavaScript’s prompt. i write this code. but it is too simple. how to design it with css or any other?
The only way around it is to create your own prompt using html css and javascript. see example below that you could expand on.
/* show Prompt plugin */ var showPrompt = (function() < var promptEl = document.querySelector('.prompt'), _cb = null; var prompt = < el: promptEl, form: promptEl.querySelector('.prompt__form'), text: promptEl.querySelector('.prompt__text'), input: promptEl.querySelector('.prompt__input'), submit: promptEl.querySelector('.prompt__submit') >prompt.form.addEventListener('submit', hide, false); function show( text, cb ) < prompt.el.classList.add('prompt--show'); prompt.text.innerHTML = text; _cb = cb; >function hide( e ) < e.preventDefault(); prompt.el.classList.remove('prompt--show'); _cb.call( prompt, prompt.input.value ); >return show; >)();// show the prompt showPrompt('Enter Your Text Here', function( answer )< console.log( 'prompt submitted', answer ); >);
* < box-sizing: border-box; >.prompt < /* make the backgronud full screen */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(40,40,40,.37); /* make it show on top of all other elements */ z-index: 999; /* hide the prompt by default */ visibility: hidden; opacity: 0; transition: .6s opacity, .6s visibility; >.prompt__form < /* center the prompt window */ position: fixed; top: 50%; left: 50%; transform: translate( -50%, -50% ); width: 400px; padding: 1em; background: #e5e5e5; >.prompt--show < visibility: visible; opacity: 1; >.prompt__input < width: 80%; float: left; >.prompt__submit
Window Object, The window object represents an open window in a browser. If a document contain frames (
How to make custom prompt boxes within functions in JavaScript? [duplicate]
I started coding a button program about a week ago, and have made quite a bit of progress. I’m new to HTML, CSS and JS, but seem to be learning quite quickly. The thing I want to do next, is create a custom prompt + alert box for my code, but I can’t figure out how to do it within functions. This is my code:
