Courses/Design & Technique-Essential Web Design/Q2/05 - Revision history

Andre at 13:40, 26 November 2016

2016-11-26T13:40:46Z

← Older revision		Revision as of 13:40, 26 November 2016
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=

Andre at 20:28, 14 December 2015

2015-12-14T20:28:34Z

Andre: /* jQuery */

2015-12-14T15:13:08Z

jQuery

← Older revision		Revision as of 15:13, 14 December 2015
Line 26:		Line 26:
	with get stored in the variables <code>userName</code> and <code>userLocation</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.		and is finally added of text to the <nowiki><h2></nowiki> just appended.




			Note: that is possible because of <code>event.preventDefault();</code>. We are preventing form submit to produce its own behavior, so we can get the values of $('form#userName') and $('form#userLocation')

	==Adventure: with text user input==		==Adventure: with text user input==

Andre: 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
and the children..."

2015-12-14T15:07:45Z

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..."

New page

=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 tags <code><input></code>

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

==input tag==
<code><input></code> 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 jQuery./Javascript code is listening to the event submit by <code>$("form#userQuestions")</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.

==Adventure: with text user input==
'''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 REPLACE 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===
<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>
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>

</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>
</source>

← Older revision		Revision as of 20:28, 14 December 2015
Line 21:		Line 21:

	== 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>		When submit 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>		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.		and is finally added of text to the <nowiki><h2></nowiki> just appended.

	Note: ~~that is possible because of~~ <code>event.preventDefault();</code>~~. We are preventing~~ form ~~submit~~ to produce its ~~own~~ behavior, so we can get the values of $('form#userName') and $('form#userLocation')		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 43:		Line 43:

	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.

Courses/Design & Technique-Essential Web Design/Q2/05 - Revision history

Andre at 13:40, 26 November 2016

Andre at 20:28, 14 December 2015

Andre: /* jQuery */

Andre: 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 and the children..."

Andre: 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
and the children..."