Custom / Styled prompt window?

Question

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

<html>
    <body>
        <textarea class="prompt" disabled="1"></textarea><br>
        <input class="input" type="text" value="inputText"></input>
        <input type="submit" value="userInput"></input>
    </body>
</html>

and CSS of

CSS

.prompt  {
    width: 300px;
    height: 500px;
    background: black;
    color: #FFA500;
}

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.

function fight()  {
  var intro = prompt("You are a hero who saved your town from a dragon attack years ago. You had fun murdering that dragon, but sadly no dragon has attacked since. Just when all hope is lo, you hear the sirens ring through the city. You know what that means. Do you PREPARE, or IGNORE THE SIRENS?").toUpperCase();
  switch(intro)  {
    case 'PREPARE':
      if(intro === "PREPARE") {
        prompt("You decided to " + intro + ". You need to choose what you will do. Keep in mind, the more activities you do, the less energy you have! You only have 3 days to prepare! What do you do? Do you SEARCH ARMOR STAND, SEARCH WEAPON STAND, GO TO MERCHANT, FIGHT DRAGON, TRAIN, or SLEEP?").toUpperCase();
      } 
  }
}

@import url(http://fonts.googleapis.com/css?family=Permanent+Marker);

html, body  {
  background: #000;
  margin: 0;
  padding: 0;
}
#wrap  {
  width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.container  {
  position: relative;
  top: 50px;
  margin-left: auto;
  margin-right: auto;
  width: 570px;
  height: 350px;
  border: 6px ridge orange;
  padding: 0;
}
.container img  {
  position: absolute;
  bottom: 0px;
  width: 570px;
  height: 350px;
  z-index: -1;
}
p.intro  {
  color: black;
  text-shadow:
    -1px -1px 0 #FFF,
    1px -1px 0 #FFF,
    -1px 1px 0 #FFF,
    1px 1px 0 #FFF;  
}
h2.header  {
    text-shadow:
    -1px -1px 0 #FFA500,
    1px -1px 0 #FFA500,
    -1px 1px 0 #FFA500,
    1px 1px 0 #FFA500;  
}
.box  {
  float: left;
  min-width: 567px;
  min-height: 350px;
}
.box h2  {
  font-family: 'Permanent Marker', cursive;
  font-size: 200%;
  text-align: center;
}
.box p  {
  font-family: 'Permanent Marker', arial;
  text-align: center;
}
.box a  {
  position: absolute;
  left: 165px;
  display: inline-block;
  border: 3px groove #000;
  border-radius: 5px;
  background: red;
  margin-left: auto;
  margin-right: auto;
  width: 225px;
  height: 75px;
  font-family: 'Permanent Marker', cursive;
  color: #FFA500;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
  text-align: center;
}
.battles img  {
}

<html>
  <body>
    <div id="wrap">
      <div class="box">
        <div class="container">
          <h2 class="header">Dragon Slayer - REBORN!</h2>
          <p class="intro">You are a hero who saved your town from a dragon attack years ago. You had fun murdering that dragon, but sadly no dragon has attacked since. Just when all hope is lost, you hear the sirens ring through the city. You know what that means.</p>
          <a href="javascript:fight()"><br>BEGIN!</a>
          <img class="scenario"  src="http://www.thegaminghideout.com/school/stage1.png">
          <div class="battles">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

phantomesse · Accepted Answer

Here is an example using jQuery. jQuery is useful for manipulating DOM elements. Instead of selecting an object by doing:

document.getElementById('someid');

You would select the element as you would in CSS:

$('#someid);

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 {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'
  });
});

@import url(http://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: 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <h1>Food Adventure</h1>
  <div id="prompt"></div>
  <div id="options"></div>
</div>

Custom / Styled prompt window?

Tags:

javascript

html

css

HTML

CSS

JavaScript

The Gaming Hideout

1 Answers

phantomesse

Recent Activity

Donate For Us

Custom / Styled prompt window?

Tags:

javascript

html

css

HTML

CSS

JavaScript

The Gaming Hideout

1 Answers

phantomesse

Related questions

Recent Activity

Donate For Us