• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML Form-based text entry system

scapegoat26

New Coder
Hi there,

I'm sorry if I've posted this in the wrong place - but I suspect what I want to do could be achieved by HTML.

I'm basically looking to set up a 'choose your own adventure' system, where each page is a chapter of a story, and at the bottom of each page is a link where it could be, for example:

a) you go down the path
b) you stay where you are

This part I know could be achieved with just hyperlinks and a series of pages, however I'm also looking to use a personalisation element, whereby at the start you're presented with a textbox form based entry system that says something like

First name: (followed by a text box where you enter your name)
Hair colour: (followed by a text box where you enter your hair colour)

So then on each chapter page, I would expect what I type to look something like...

'My name is <firstname> and my hair is <haircolour>.

Obviously if in the form they typed:

First name: Ben
Hair Colour: Brown

then the page that would then appear (and the chapters to follow) would this data and would appear to them as:

My name is Ben and my hair is brown.

I know it's not an ultra-complicated request, but I can't find any resource that points towards me being able to achieve it!

Thanks in advance!
 

OldMan

Coder

scapegoat26 you do not need something that complicated. You just need HTML/CSS and JavaScript. JS does the magic you asked for. First you need a place to store the user's name that can be accessed on every page. sessionStorage works great for this because it self destroys when the browser or tab is closed.

Store
sessionStorage.setItem("playersName", "Timmy");
Retrieve
document.getElementsByClassName("userName").innerHTML = sessionStorage.getItem("playersName");

The retrieve above shows the method of placing the name on the page. Every where you want his/her name use <sdpan class=""userName"></span>. This allows you to have their name on a page more than once. Using 'class' lets you style the name. If you want to style the name differently when two or more are on the same page - add an ID.

MAKE sure your JS is after the page loads - that is after the </body> tag and before the </html> tag. That way the page loads before you start monkeying with it.
Your first line is the retrieval linein the JS.

EXTRA
Using CSS display: hidden you can have some of the story on the same page and the link you talk about to another page just allows JS to make it visible with document.getElementById('storyPart2').style.display = 'block';

 

nncyjones1345

New Coder
Input Elements are the most common elements which are used in HTML Forms. Various user input fields can be created such as textfield, check box, password field, radio button, submit button etc. The most common input elements are listed below:


  1. Text Field in HTML Forms :
    The text field is a one line input field allowing the user to input text. Text Field input controls are created using the “input” element with a type attribute having value as “text”.
  • html

<!DOCTYPE html>
<html>
<h3>Example Of Text Field</h3>
<body>
<form>
<label for="EMAIL ID">Email Id:</label><br>
<input type="text" name="Email id" id="Email id">
</form>
</body>
</html>
  1. Password Field in HTML Forms :
    Password fields are a type of text field in which the text entered is masked using asterisk or dots for prevention of user identity from another person who is looking onto the screen. Password Field input controls are created using the “input” element with a type attribute having value as “password”.
  • html



<!DOCTYPE html>
<html>
<h3>Example of Password Field</h3>
<body>
<form>
<label for="user-password">Password:
</label><br>
<input type="password" name="user-pwd"
id="user-password">
</form>
</body>
</html>
 

Top