Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2/05"

From Publication Station
(Created page with "=Interacting with the user= ==With text== One of the most common ways to receive textual input from web users is by using parent HTML tag <code><form></code> and the children...")
 
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
=exploring the city - choose your own adventure=
==textual adventure games==
* [https://en.wikipedia.org/wiki/Colossal_Cave_Adventure Colossal Cave Adventure] (1976,1977)
* [https://en.wikipedia.org/wiki/Zork Zork] - [http://textadventures.co.uk/games/play/5zyoqrsugeopel3ffhz_vq online emulation] (1977)
https://upload.wikimedia.org/wikipedia/en/a/ac/Zork_I_box_art.jpg
==adventure games' formula==
* take a popular fiction game. E.g. a detective novel/
* create:
** a background story
** a map for the players to move around it
** objects to manipulate
** characters to interact with
** '''a plot tree with several outcomes'''
[[File:game-map.svg|thumb|Plot tree]]
* add: descriptions, dialogues, error messages and a vocabulary for the players
''game development then becomes much like planning and writing a piece of short fiction, except multiple outcomes must be conceived''.
Aarseth, Espen J. 1997 ''Cybertext''
==the city==
Can we create a web-based game, that can played within the physical space of the city, using mobile phones?
The city game can become a way of exploring a space, a city, an excuse to drift (dérive), experience and perceive the city differently from our day-to-day understanding of it.
== choose you own adventure in the city==
[[File:cyod.jpg]]
A very simple example using JS and jQuery
<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <title>Choose your own adventure</title>
  <meta charset="utf-8" />
    <style>
    </style>
</head>
<body>
  <p class="msg"></p>
  <img class="image" />
  <br/>
  <div class="buttons">
      <p class="question"></p>
    <!-- buttons: will have to be created dynamically -->
  </div>
<script>
    //object containing collection of scenes:
    // each scene contains: title  msg  img (option), question,  connect(ing scenes) },     
    var scenes={
        scene_1: {title:"start", msg:"Look around you. Stop and choose where you want to go to.", img: "", question:"What do you want to do next?", connect:[2,5] }, 
        scene_2: {title:"walk", msg:"Walk in a straight line until you encounter and obstacle", img: "", question:"How large is the object?", connect:[3,4] }, 
        scene_3: {title:"small", msg:"Take the object with you. Walk back to to you started. Leave the object there and look around. Is this still the same place?", img: "", question:"Go to", connect:[1] }, 
        scene_4: {title:"large", msg:"Leave a message in the obstacle for someone to see", img: "", question:"Go to", connect:[1] }, 
        scene_5: {title:"follow" , msg:"Follow a moving object, until you feel bored.", img:"", question:"How is this object?",  connect:[3,6,4] }, 
        scene_6: {title:"too far" , msg:"Look at the object from where you are now. Move your head slowly towards the sky. Look at it carefully.", img: "", question:"Go to",  connect:[1] }, 
    }
function replace_scene(n){ // function to replace the scene content base on its number
    var scene = scenes[n];
    $("p.msg").html( scene.msg );
    $("img.image").attr( "src", scene.img );
    $("p.question").html( scene.question );
   
    for (var i=0; i < scene.connect.length; i=i+1) { var numb='scene_'+scene.connect[i]; //create buttons
                                                    var next_title=scenes[numb].title;
                                                    button = document.createElement('button')
                                                    $(button).text(next_title);
                                                    $(button).attr('name', numb);
                                                    $('div.buttons').append(button);
                                                    $("button").click( // when user makes choice (click any button)
                                                        function(){
                                                            $("button").remove();//remove all buttons
                                                            var next_scene = $(this).attr('name'); //get next scene through the button name attribute
                                                            replace_scene(next_scene); //move to another scene
                                                        })
                                                  }
}
$(document).ready(
    function(){
        replace_scene('scene_1'); // start in scene 1
       
    })
</script>
</body>
</html>
</source>
===discussion===
How is this game constructed?
*  '''scenes'''; Each scene contains:
** number. E.g. <code>scene_2</code>
** title
** msg
** img (option),
** question
**  connect(ing scenes)
* html template (empty tags) that are replace as the game progresses
What can be changed in this game?
=== assignment===
Design a new game, that has to although existing in the Internet, has to interfere with real-life.
It has to interfere with the real world, the physical reality of the player.
The game should help the player discover the space of the square: the details, sounds, movements, the people.
Keep it simple.
Have fun!
=Interacting with the user=
=Interacting with the user=


Line 21: Line 150:


== jQuery ==
== jQuery ==
Our jQuery./Javascript code is listening to the event submit by <code>$("form#userQuestions")</code>
Our Javascript code is listening to the event submit by <code>$("form#userQuestions").submit(</code>
 
When it happens, it asks for the values of <code>$('#userName').val();</code> and <code>$('#userLocation').val();</code>
with get stored in the variables <code>userName</code> and <code>userLocation</code>
 
and is finally added of text to the <code><h2></code> just appended.
 


When submit happens, it asks for the values of <code>$('#userName').val();</code> and <code>$('#userLocation').val();</code>
which get stored in the variables <code>userName</code> and <code>userLocation</code>


and is finally added of text to the <nowiki><h2></nowiki> just appended.


Note: <code>event.preventDefault();</code> is there to prevent the form submission to produce its default behavior, which would be to refresh the page. This way we can get the values of $('form#userName') and $('form#userLocation') and keep the form as it was


==Adventure: with text user input==
==Adventure: with text user input==
'''Last week's adventure game, but with added user input interaction'''
Expanding last week's adventure game, but with added user input interaction.


=== Code explained ===
=== Code explained ===
Line 45: Line 172:


On $("form#userQuestions").submit():
On $("form#userQuestions").submit():
*  userName, userLocation are STORED and REPLACE in scenes object %%userName%% and %%location%%  
*  userName, userLocation are STORED and '''REPLACED''' in scenes object %%userName%% and %%location%%  
* $('div#scene') is FILLED with values from scene_1, with the FUNCTION: replace_scene('scene_1');
* $('div#scene') is FILLED with values from scene_1, with the FUNCTION: replace_scene('scene_1');
*  $('div#form') is HIDDEN.  
*  $('div#form') is HIDDEN.  

Latest revision as of 13:40, 26 November 2016

exploring the city - choose your own adventure

textual adventure games

https://upload.wikimedia.org/wikipedia/en/a/ac/Zork_I_box_art.jpg


adventure games' formula

  • take a popular fiction game. E.g. a detective novel/
  • create:
    • a background story
    • a map for the players to move around it
    • objects to manipulate
    • characters to interact with
    • a plot tree with several outcomes
Plot tree
  • add: descriptions, dialogues, error messages and a vocabulary for the players

game development then becomes much like planning and writing a piece of short fiction, except multiple outcomes must be conceived.

Aarseth, Espen J. 1997 Cybertext

the city

Can we create a web-based game, that can played within the physical space of the city, using mobile phones?

The city game can become a way of exploring a space, a city, an excuse to drift (dérive), experience and perceive the city differently from our day-to-day understanding of it.

choose you own adventure in the city

Cyod.jpg

A very simple example using JS and jQuery 

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

  <title>Choose your own adventure</title>
  <meta charset="utf-8" />
    <style>
    </style>
</head>
<body>
  <p class="msg"></p>
  <img class="image" />
   <br/>
  <div class="buttons">
      <p class="question"></p>
    <!-- buttons: will have to be created dynamically -->
  </div>

<script>
    //object containing collection of scenes:
    // each scene contains: title  msg  img (option), question,  connect(ing scenes) },      
    var scenes={ 
        scene_1: {title:"start", msg:"Look around you. Stop and choose where you want to go to.", img: "", question:"What do you want to do next?", connect:[2,5] },  
        scene_2: {title:"walk", msg:"Walk in a straight line until you encounter and obstacle", img: "", question:"How large is the object?", connect:[3,4] },  
        scene_3: {title:"small", msg:"Take the object with you. Walk back to to you started. Leave the object there and look around. Is this still the same place?", img: "", question:"Go to", connect:[1] },  
        scene_4: {title:"large", msg:"Leave a message in the obstacle for someone to see", img: "", question:"Go to", connect:[1] },  
        scene_5: {title:"follow" , msg:"Follow a moving object, until you feel bored.", img:"", question:"How is this object?",  connect:[3,6,4] },  
        scene_6: {title:"too far" , msg:"Look at the object from where you are now. Move your head slowly towards the sky. Look at it carefully.", img: "", question:"Go to",  connect:[1] },  
    }


function replace_scene(n){ // function to replace the scene content base on its number
    var scene = scenes[n];

    $("p.msg").html( scene.msg );
    $("img.image").attr( "src", scene.img );
    $("p.question").html( scene.question );
    
    for (var i=0; i < scene.connect.length; i=i+1) { var numb='scene_'+scene.connect[i]; //create buttons
                                                     var next_title=scenes[numb].title; 
                                                     button = document.createElement('button')
                                                     $(button).text(next_title);
                                                     $(button).attr('name', numb);
                                                     $('div.buttons').append(button);

                                                     $("button").click( // when user makes choice (click any button)
                                                         function(){ 
                                                             $("button").remove();//remove all buttons
                                                             var next_scene = $(this).attr('name'); //get next scene through the button name attribute
                                                             replace_scene(next_scene); //move to another scene
                                                         })
                                                   }

}


$(document).ready(
    function(){
        replace_scene('scene_1'); // start in scene 1 
        
    })

</script>
</body>
</html>

discussion

How is this game constructed?

  • scenes; Each scene contains:
    • number. E.g. scene_2
    • title
    • msg
    • img (option),
    • question
    • connect(ing scenes)
  • html template (empty tags) that are replace as the game progresses

What can be changed in this game?

assignment

Design a new game, that has to although existing in the Internet, has to interfere with real-life.

It has to interfere with the real world, the physical reality of the player.

The game should help the player discover the space of the square: the details, sounds, movements, the people.

Keep it simple. Have fun!


Interacting with the user

With text

One of the most common ways to receive textual input from web users is by using parent HTML tag <form> and the children tags <input>


HTML Forms overview https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms

input tag

<input> is the element that receives the interaction from the user.

It can take a variety of forms and behaviors, depending on the type attribute

In the example only type="text" and type="submit" are used, but there are many more type attribute value to be used. See them in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes

required attribute, means that the user must fill in a value before submitting a form

placeholder attribute - provides A hint to the user of what can be entered in the control


jQuery

Our Javascript code is listening to the event submit by $("form#userQuestions").submit(

When submit happens, it asks for the values of $('#userName').val(); and $('#userLocation').val(); which get stored in the variables userName and userLocation

and is finally added of text to the <h2> just appended.

Note: event.preventDefault(); is there to prevent the form submission to produce its default behavior, which would be to refresh the page. This way we can get the values of $('form#userName') and $('form#userLocation') and keep the form as it was

Adventure: with text user input

Expanding last week's adventure game, but with added user input interaction.

Code explained

The HTML page is divided in 2 divs:

  • $('div#form') - a div w/ a form that receives user input
  • $('div#scene') - a div that contains text, image and buttons for each scene

On start:

  • $('div#form') is SHOWN.
  • $('div#scene') is HIDDEN (css display:none)

On $("form#userQuestions").submit():

  • userName, userLocation are STORED and REPLACED in scenes object %%userName%% and %%location%%
  • $('div#scene') is FILLED with values from scene_1, with the FUNCTION: replace_scene('scene_1');
  • $('div#form') is HIDDEN.
  • $('div#scene') is SHOWN (css display:block)

User is on scene 1:

  • every time the user CLICKS a button: $("button").click()
    • a next_scene is CREATED from the clicked button 'name' attribute
    • replace_scene() for the next_scene

code

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

  <title>Choose your own adventure</title>
  <meta charset="utf-8" />
    <style>
    img{width: 300px;}
button{ margin-left:10px;}
input {margin-bottom:10px;}
div#scene {display: none;}

    </style>
</head>
<body>

<div id="form">
    <h1 id="question">In order to begin, you must tell...</h1>
<form id="userQuestions">
    <input name="userName" id="userName" required="" placeholder="Your first name" type="text">
    <br/>
    <input name="userLocation" id="userLocation" required="" placeholder="Your current location" type="text">
    <br/>
  <input value="Send" type="submit">
</div>

<div id="scene">
  <p class="msg"></p>
  <img class="image" />
   <br/>
  <div class="buttons">
      <p class="question"></p>
    <!-- buttons: will have to be created dynamically -->
  </div>
</div>

<script>
    //object containing collection of scenes:
    var scenes={ 
        scene_1: {title:"start", msg:"<b>Hey %%userName%%</b>, welcome to the game. The game will have as starting point <b>%%location%%</b>.", img: "http://thepiratebook.net/wp-content/uploads/2015/11/Sonideros_L.Radwanski_PirateBook_2.jpg", question:"What do you want to do next?", 
connect:[2,5] },  
        scene_2: {title:"walk", msg:"From %%location%%, walk in a straight line until you encounter and obstacle", img: "", question:"How large is the object?", connect:[3,4] },  
        scene_3: {title:"small", msg:"Take the object with you. Walk back to to you started. Leave the object there and look around. Is %%location%% still the same place?", img: "", question:"Go to", connect:[1] },  
        scene_4: {title:"large", msg:"%%userName%%, leave a message in the obstacle for someone to see", img: "", question:"Go to", connect:[1] },  
        scene_5: {title:"follow" , msg:"Follow a moving object, until you feel bored.", img:"", question:"How is this object?",  connect:[3,6,4] },  
        scene_6: {title:"too far" , msg:"Look at the object from where you are now. Move your head slowly towards the sky above %%location%%. Look at it carefully.", img: "", question:"Go to",  connect:[1] },  
    }


$("form#userQuestions").submit(function(event){ //when form is submitted
        // form user-input values
        var userName = $('#userName').val();
        var userLocation = $('#userLocation').val();

        //for loop: replaces sentences placeholders (%%placeholder%%) w/ user-input values
        for (var key in scenes) {
            var newscene = scenes[key];
            console.log(userName, userLocation);
            newscene = newscene.msg.replace('%%userName%%', userName)
                               .replace('%%location%%', userLocation);      
            scenes[key].msg=newscene; 
        }

        event.preventDefault();
        $("#userName").val(''); //clean inputs
        $("#userLocation").val(''); //clean input#userName
        $('div#form').css('display', 'none'); //hide form

        replace_scene('scene_1'); // start scene 1 
        $('div#scene').css('display', 'block'); //make visible div#scene
})



function replace_scene(n){ // function to replace the scene content base on its number
    var scene = scenes[n];

    $("p.msg").html( scene.msg );
    $("img.image").attr( "src", scene.img );
    $("p.question").html( scene.question );
    
    for (var i=0; i < scene.connect.length; i=i+1) { var numb='scene_'+scene.connect[i]; //create buttons
                                                     var next_title=scenes[numb].title; 
                                                     button = document.createElement('button')
                                                     $(button).text(next_title);
                                                     $(button).attr('name', numb);
                                                     $('div.buttons').append(button);

                                                     $("button").click( // when user makes choice (click any button)
                                                         function(){ 
                                                             $("button").remove();//remove all buttons
                                                             var next_scene = $(this).attr('name'); //get next scene through the button name attribute
                                                             replace_scene(next_scene); //move to another scene
                                                         })
                                                   }

}
</script>
</body>
</html>
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/Q2/05&oldid=5767’