0

I want to create a simple text game of choices of sorts where you always have two choices and depending on your choice, something is displayed and the current content disappears. My problem is each of the choices are different so i can't figure out a way to not repeat myself again and again in the javascript code.

HTML :

<!Doctype html>
<html>
<head>

    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css"/>

    <title>Game</title>
</head>
    <body>
    <div id="console">
        <div class="storyCard" id="start">
            <p class="q">Some stuff.
            <p class="a">getup</p>
            <p class="a">sleep</p>
        </div>
        <div class="storyCard" id="getup">
            <p class="q">Something happened</p>
            <p class="a">do this</p>
            <p class="a">do that</p>
        </div>
        <div class="storyCard" id="sleep">
            <p class="q">something else happened</p>
            <p class="a">do something</p>
            <p class="a">do something else</p>
        </div>
       <!--and there will be a lot of such storyCards based on the choices.-->     
 </div>
    <script type="text/javascript" src="js.js"></script>
</body>
</html>

CSS :

body {
    margin: 0 auto;
    align-content: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;   
}
#console {
    width: 100%;
}

.storyCard {
    min-width: 100px;
    max-width: 600px;
    background-color: rgba(0, 0, 0, 0.51);
    box-shadow: 1px 1px 7px;
    padding: 50px;
    color: white;
    margin: 0 auto;
    border-radius: 4px;
    display: none;
}
#start {
    display: block;
}
.storyCard .a {
    background-color: dodgerblue;
    border-bottom-color: dodgerblue;
    border-top-color: white;
    border-left-color: white;
    border-right-color: dodgerblue;
    padding: 10px;
    text-align: center;
    color: white;
    width: 30%;
    display: inline;
    margin: 0 auto;
    box-shadow: 1px 1px 7px black; 
    float: right;
    cursor: pointer;
}
.storyCard .a:hover {
    background-color: white;
    color: black;
}
}

Javascript :

document.querySelector('#console').addEventListener('click', function (e) {
    var answer = e.target.textContent;
    switch (answer) {
        case 'getup':
            e.target.parentNode.style.display = 'none';
            document.querySelector('#getup').style.display = 'block';
            break;
        case 'sleep':
            e.target.parentNode.style.display = 'none';
            document.querySelector('#sleep').style.display = 'block';
            break;
        case 'do this':
            e.target.parentNode.style.display = 'none';
            /*display another content like above*/
        case 'do that':
            /*hide the current content again and display another content and add more cases*/

}, false);
4
  • Please clarify what exactly code you don’t want to repeat in your example?
    – zhekaus
    Commented Mar 15, 2016 at 6:03
  • Sorry. The hiding part. e.target.parentNode.style.display = 'none' Commented Mar 15, 2016 at 6:06
  • I tried creating a function inside the current function but it doesn't work. Like var hide = function () { e.target.parentNode.style.display = 'none';} Commented Mar 15, 2016 at 6:07
  • I think the better way will be to create a multidimensional array with all the states and a function that will return the next state for the specified one.
    – zhekaus
    Commented Mar 15, 2016 at 6:30

3 Answers 3

1

I assume that the question must defined in html like your sample. There are many others way to do this better.

You can use class name to specify next question.

document.addEventListener('click', function (e) {
  var target = e.target;
  if (target.className.match('answer')) {
    var nextQuestionId = target.className.replace('answer ', '');
    hideAllStoryCards();
    showStoryCard(nextQuestionId);
  }
});

function hideAllStoryCards () {
  var i, elm, elms = document.getElementsByClassName('storyCard');
  for (i = 0; i < elms.length; i++) {
    elm = elms[i];
    elm.style.display = 'none';
  }
}

function showStoryCard (id) {
  var storyCard = document.getElementById(id);
  storyCard.style.display = 'block';
}

hideAllStoryCards();
showStoryCard('first-question');
<div id="console">
  <div class="storyCard" id="first-question">
    <p class="q">Are you hungry?</p>
    <p class="answer what-do-you-want-to-eat">yes</p>
    <p class="answer may-i-help-you">no</p>
  </div>
  <div class="storyCard" id="what-do-you-want-to-eat">
    <p class="q">Some stuff.</p>
    <p class="answer NEXT_QUESTION_ID">a pie</p>
    <p class="answer ANOTHER_QUESTION_ID">a buger</p>
  </div>
  <div class="storyCard" id="may-i-help-you">
    <p class="q">Some stuff.</p>
    <p class="answer NEXT_QUESTION_ID">bye</p>
    <p class="answer ANOTHER_QUESTION_ID">bye again</p>
  </div>
</div>

1
  • thank you. a new logic was what i actually needed. i will try that and let's hope i don't run into any more troubles google can't solve Commented Mar 15, 2016 at 6:19
1

You can try something like performAction(e, '#getup'); - a generalized method with parameters, in this link.

Please refer below for the code:

HTML:

<div id="console">
  <div class="storyCard" id="start">
    <p class="q">Some stuff.</p>
    <p class="a">getup</p>
    <p class="a">sleep</p>
  </div>
  <div class="storyCard" id="getup">
    <p class="q">Something happened</p>
    <p class="a">do this</p>
    <p class="a">do that</p>
  </div>
  <div class="storyCard" id="sleep">
    <p class="q">something else happened</p>
    <p class="a">do something</p>
    <p class="a">do something else</p>
  </div>
  <!--and there will be a lot of such storyCards based on the choices.-->
</div>

CSS:

body {
  margin: 0 auto;
  align-content: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

#console {
  width: 100%;
}

.storyCard {
  min-width: 100px;
  max-width: 600px;
  background-color: rgba(0, 0, 0, 0.51);
  box-shadow: 1px 1px 7px;
  padding: 50px;
  color: white;
  margin: 0 auto;
  border-radius: 4px;
  display: none;
}

#start {
  display: block;
}

.storyCard .a {
  background-color: dodgerblue;
  border-bottom-color: dodgerblue;
  border-top-color: white;
  border-left-color: white;
  border-right-color: dodgerblue;
  padding: 10px;
  text-align: center;
  color: white;
  width: 30%;
  display: inline;
  margin: 0 auto;
  box-shadow: 1px 1px 7px black;
  float: right;
  cursor: pointer;
}

.storyCard .a:hover {
  background-color: white;
  color: black;
}

JS:

document.querySelector('#console').addEventListener('click', function(e) {
  var answer = e.target.textContent;
  switch (answer) {
    case 'getup':
      performAction(e, '#getup');
      break;
    case 'sleep':
      performAction(e, '#sleep');
      break;
    case 'do this':
      performAction(e, '#getup'); /**Use any 'id' or target of your choice.*/
      /*display another content like above*/
      break;
    case 'do that':
      performAction(e, '#getup'); /*Use any 'id' or target of your choice.*/
      /*hide the current content again and display another content and add more cases*/
      break;
  }
}, false);

function performAction(event, target) {
  event.target.parentNode.style.display = 'none';
  document.querySelector(target).style.display = 'block';
}
1
  • this works but partially. it only hides the current content, doesn't display anything after that. i tried something similar and it worked similar. thank you for helping though Commented Mar 15, 2016 at 6:20
0

You need to separate your data from your UI.

Your data could be something simple like this:

var stories;

function StoryCard(q, option1, option2) {
    this.q = q
    this.option1 = option1;
    this.option2 = option2;
}

function displayStory(storyCard) {
    document.getElementById('q').innerHTML = storyCard.q;
    document.getElementById('option1').innerHTML = storyCard.option1;
    document.getElementById('option2').innerHTML = storyCard.option2;
}

Your "console" UI could change to something more like this:

<div id="console">
    <div class="storyCard" id="start">
        <p class="q" id="q">&nbsp;</p>
        <p class="a" id="option1">&nbsp;</p>
        <p class="a" id="option2">&nbsp;</p>
    </div>
</div>

Your click function may be more like this:

document.querySelector('#console').addEventListener('click', function (e) {
    var answer = e.target.id;
    switch (answer) {
        default: // for when they click within the div, but not on an option
            break;
        case 'option1':
        case 'option2':
            var story = stories[e.target.innerHTML];
            if (null != story) {
                displayStory(story);
            }
            break;
    }
}, false);

You would set up your stories perhaps in an onload:

function init() {
    stories = { "start": new StoryCard("Some stuff", "getup", "sleep")
              , "getup": new StoryCard("Something happened", "do this", "do that")
              , "sleep": new StoryCard("something else happened", "do something", "do something else")
              };

    displayStory(stories["start"]);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.