Courses/Design & Technique-Essential Web Design/Q2/05
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>
