Star Wars Quiz
All you have to do is to start with:
<form enctype="text/plain" method="post" action="mailto:you@yourdmainhere.com">
Make the necessary changes and end with:
<input value="Send" type="submit">
</form>
That's it!
Gus
Monday, 20 July 2009
HTML Forms (all together now!)
How about getting all the HTML form elements we have seen before in one single form? Can we do that? Of course we can.
Star Wars Quiz
All you have to do is to start with:
<form enctype="text/plain" method="post" action="mailto:you@yourdmainhere.com">
Make the necessary changes and end with:
<input value="Send" type="submit">
</form>
That's it!
Gus
Star Wars Quiz
All you have to do is to start with:
<form enctype="text/plain" method="post" action="mailto:you@yourdmainhere.com">
Make the necessary changes and end with:
<input value="Send" type="submit">
</form>
That's it!
Gus
Check Boxes
HTML check boxes work much like HTML radios except that you can choose more than one at a time.
Here is an example.
Here is the code for this:
<form method="post" action="mailto:youremail@email.com">
Which of the following Star Wars characters are jedi?
<input type="checkbox" name="StarWars" value="Mace_Windu">Mace Windu
<input type="checkbox" name="StarWars" value="Palpatine">Palpatine
<input type="checkbox" name="StarWars" value="Yoda">Yoda
<input type="checkbox" name="StarWars" value="Princess_Leia">Princess Leia
<input type="checkbox" name="StarWars" value="Obi_Wan_Kenobi">Obi Wan Kenobi
<input type="submit" value="Send">
</form>
Make the necessary changes (don't forget to change the email address) and voilà!
Gus
Here is an example.
Here is the code for this:
<form method="post" action="mailto:youremail@email.com">
Which of the following Star Wars characters are jedi?
<input type="checkbox" name="StarWars" value="Mace_Windu">Mace Windu
<input type="checkbox" name="StarWars" value="Palpatine">Palpatine
<input type="checkbox" name="StarWars" value="Yoda">Yoda
<input type="checkbox" name="StarWars" value="Princess_Leia">Princess Leia
<input type="checkbox" name="StarWars" value="Obi_Wan_Kenobi">Obi Wan Kenobi
<input type="submit" value="Send">
</form>
Make the necessary changes (don't forget to change the email address) and voilà!
Gus
Sunday, 19 July 2009
Multiple-choice questions (mailto:)
We saw in a previous post how to create interactive multiple-choice questions. We are now going to see how we could create multiple-choice questions to be sent to an email address of your choice.
In order to do that we will use HTML radio buttons.
Here is an example with two questions. You can have only one question or add more if you want.
Here is the code used for this:
<form method="post" action="mailto:youremail@email.com">
1. In which planet was Anakin Skywalker born? <br />
<input type="radio" name="Question1" value="Coruscant">A. Coruscant <br />
<input type="radio" name="Question1" value="Tatooine">B. Tatooine <br />
<input type="radio" name="Question1" value="Death_Star">C. Death Star <br />
<br />
2. What is Darth Sidious real name?<br />
<input type="radio" name="Question2" value="Palpatine">Palpatine<br />
<input type="radio" name="Question2" value="Yoda">Yoda<br />
<input type="radio" name="Question2" value="Anakin">Anakin<br />
<input type="submit" value="Send">
</form>
As with the others, copy and paste this code onto your blog making the necessary changes.
That is it!
In order to do that we will use HTML radio buttons.
Here is an example with two questions. You can have only one question or add more if you want.
Here is the code used for this:
<form method="post" action="mailto:youremail@email.com">
1. In which planet was Anakin Skywalker born? <br />
<input type="radio" name="Question1" value="Coruscant">A. Coruscant <br />
<input type="radio" name="Question1" value="Tatooine">B. Tatooine <br />
<input type="radio" name="Question1" value="Death_Star">C. Death Star <br />
<br />
2. What is Darth Sidious real name?<br />
<input type="radio" name="Question2" value="Palpatine">Palpatine<br />
<input type="radio" name="Question2" value="Yoda">Yoda<br />
<input type="radio" name="Question2" value="Anakin">Anakin<br />
<input type="submit" value="Send">
</form>
As with the others, copy and paste this code onto your blog making the necessary changes.
That is it!
HTML forms (multiple text entries)
On our last post you saw how you could use a simple HTML code to create a text-input area. You can also use the same principle for multiple text-input areas.
For example:
“Getting to know you” questionnaire
This is the code that generated it:
<h2>“Getting to know you” questionnaire</h2>
<form action="mailto:you@yourdmainhere.com" method="post" enctype="text/plain">
1.Do you have brothers or sisters? If so, how many?
<input type="text" size="40" name="Question1">
2. What is your favorite activity?
<input type="text" size="40" name="Question2">
3. What is your least favorite activity?
<input type="text" size="40" name="Question3">
4. What is your favorite school subject?
<input type="text" size="40" name="Question4">
What is your favorite type of music?
<input type="text" size="40" name="Question5">
<input type="submit" value="Send">
You can copy and paste this code onto your blog and then change the questions, add questions, change the text field size, etc. Don't forget to change you@yourdmainhere.com for the email address you want the form to be sent to.
That is it!
For example:
“Getting to know you” questionnaire
This is the code that generated it:
<h2>“Getting to know you” questionnaire</h2>
<form action="mailto:you@yourdmainhere.com" method="post" enctype="text/plain">
1.Do you have brothers or sisters? If so, how many?
<input type="text" size="40" name="Question1">
2. What is your favorite activity?
<input type="text" size="40" name="Question2">
3. What is your least favorite activity?
<input type="text" size="40" name="Question3">
4. What is your favorite school subject?
<input type="text" size="40" name="Question4">
What is your favorite type of music?
<input type="text" size="40" name="Question5">
<input type="submit" value="Send">
You can copy and paste this code onto your blog and then change the questions, add questions, change the text field size, etc. Don't forget to change you@yourdmainhere.com for the email address you want the form to be sent to.
That is it!
Email response (HTML forms)
HTML forms are a great tool for you to receive information which is fed onto your blog. You can use them to send you an email with the text which has been written on your blog, making it possible for you to create writing activities.
For example:
Write a critical review of the Star Wars series.
The code for this is quite simple:
<form method="post" action="mailto:youremail@email.com">
<textarea rows="10" cols="40" wrap="physical" name="Answer"></textarea>
<input type="submit" value="Send">
</form>
Copy and paste this code onto your blog. Change youremail@email.com for the email address you want the information to be sent to. You can change the size of the text area by changing the values of 'rows' and 'cols'.
That is it!
For example:
Write a critical review of the Star Wars series.
The code for this is quite simple:
<form method="post" action="mailto:youremail@email.com">
<textarea rows="10" cols="40" wrap="physical" name="Answer"></textarea>
<input type="submit" value="Send">
</form>
Copy and paste this code onto your blog. Change youremail@email.com for the email address you want the information to be sent to. You can change the size of the text area by changing the values of 'rows' and 'cols'.
That is it!
Friday, 17 July 2009
Cloze test
You can use the same "drop-down menu" code that we used for the multiple choice question in order to make cloze questions.
Here is an example:
Exam Tips
When the day comes, give yourself plenty of time do everything: have breakfast but don't drink much; go to the toilet; arrive on time, but not too early or you will find yourself getting more and more nervous while you wait to start. Try not to talk the exam before you go in.
All you have to do is to copy and paste the following code where the gap is and write the number of the question (which will be visible) and the answer (which will be hidden).
<select> <option>____1____</option> <option>ANSWER</option> </select>
Paste it without line breaks so that you keep the paragraph format.
That is all there is to it!
Here is an example:
Exam Tips
When the day comes, give yourself plenty of time do everything: have breakfast but don't drink much; go to the toilet; arrive on time, but not too early or you will find yourself getting more and more nervous while you wait to start. Try not to talk the exam before you go in.
All you have to do is to copy and paste the following code where the gap is and write the number of the question (which will be visible) and the answer (which will be hidden).
<select> <option>____1____</option> <option>ANSWER</option> </select>
Paste it without line breaks so that you keep the paragraph format.
That is all there is to it!
Saturday, 16 May 2009
Creating instant feedback multiple-choice questions 2
This one is a much more elegant solution to creating interactive multiple-choice questions than using “drop-down” menus. The code below uses an HTML button and JavaScript alert.
This is what you actually see. Click on the button and see what happens.
So, in order to create a multiple choice question, you just have to change the "value" of the button (that is what will appear on the button) and the message of the alert. For example:
Here is the code. Just change the options and the message of the alert to your needs.
<form>
<input type="button" onclick="alert('Right!')"value="A">First option
</form>
<form>
<input type="button" onclick="alert('Wrong')"value="B">Second option
</form>
<form>
<input type="button" onclick="alert('Wrong')"value="C">Third option
</form>
<form>
<input type="button" onclick="alert('Wrong')"value="D">Fourth option
</form>
This is what you will see in your browser:
I think it is safe to say that all Internet browsers now sopport JavaScript. The only problem with it is that some users may chose to disable it in their browsers. In that case, your code won't work.
<form> <input type="button" onclick="alert('Correct!')"value="1st option"> </form> |
This is what you actually see. Click on the button and see what happens.
So, in order to create a multiple choice question, you just have to change the "value" of the button (that is what will appear on the button) and the message of the alert. For example:
What colour is Darth Vader's lightsaber?
Here is the code. Just change the options and the message of the alert to your needs.
<form>
<input type="button" onclick="alert('Right!')"value="A">First option
</form>
<form>
<input type="button" onclick="alert('Wrong')"value="B">Second option
</form>
<form>
<input type="button" onclick="alert('Wrong')"value="C">Third option
</form>
<form>
<input type="button" onclick="alert('Wrong')"value="D">Fourth option
</form>
This is what you will see in your browser:
I think it is safe to say that all Internet browsers now sopport JavaScript. The only problem with it is that some users may chose to disable it in their browsers. In that case, your code won't work.
Friday, 15 May 2009
Creating instant feedback multiple-choice questions
This is a very old trick. It is not as fancy as using CGI or JavaScript but it is simple and it works. Here is an example:
What is Darth Vader's real name?
Luke Skywalker
Anakin Skywalker
Yoda
Princess Leia
How it is done:
You can make use of “drop-down” menus to display something upon a click. Drop-down menus were not made with this in mind but it will serve our needs.
Here is an example of the HTML code for a drop down menu:
<select>
<option>Menu</option>
<option>Edit</option>
<option>View</option>
</select>
This is what you see:
All you have to do is to copy the code belowl and paste before each option. Remember change the "Right!" and "Wrong" options to match the correct answer.
<select>
<option>[___A___]</option>
<option>Right!</option>
</select>
<select>
<option>[___B___]</option>
<option>Wrong</option>
</select>
<select>
<option>[___C___]</option>
<option>Wrong</option>
</select>
<select>
<option>[___D___]</option>
<option>Wrong</option>
</select>
You can also add another menu option to give some feedback. For example:
Luke Skywalker
That is it!
Subscribe to:
Comments (Atom)
