Custom / stylized tooltip window?

Question

Custom / stylized tooltip window?

I am trying to make a game of "Choose your adventure" and I want to know whether it is possible to create a stylized / custom "Help" window, and if it cannot be opened as a "help" window, but there is a prompt and user input in the selected HTML field ? 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

CSS

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

and JavaScript (I would probably 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;

- , , , , . , / textarea, input input, . ? , , , ? .

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>

Hide result

+4

javascript html css

The Gaming Hideout 04 . '15 15:05

1

phantomesse · Accepted Answer · 2015-02-06T04:28:54+0000

jQuery. jQuery DOM. :

document.getElementById('someid');

, CSS:

$('#someid);

JSON, . story - (, "intro", "select_weapon" ) . .

, .

// Contains the story and paths
var story = {
  intro: {
    prompt: 'It is 12am and you are starving. It\ 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 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>

Hide result

Custom / stylized tooltip window?

HTML

CSS

Javascript

More articles: