Questions: Basics of Markup - Creating a User Interface with HTML Create an HTML document named game-intro.html based on the requirements outlined in the game-intro exercise at the end of Chapter 3. The form should execute a program named game-intro.php (you will have a chance to code this at the end of the next chapter). The form should allow the user to type a name for the character, choose the type of character from a drop down list (Dwarf, Elf, Human, or Wizard), choose the number of health tokens to be purchased from a drop down list (0, 10, 20, or 30), choose the number of experience tokens to be purchased from a drop down list (0, 2, 4, 6, 8, or 10), and choose the number of supply tokens to be purchased from a drop down list (0, 25, 50, 75, or 100). The form should be designed to execute a program named gameIntro.php. Use these names for the input fields: charName, charType, healthTokens, expTokens, supplyTokens. Figure 4-12 shows how the form should appear but feel free to play with the exact appearance of the form and if you prefer you can come up with your own character types.

Basics of Markup - Creating a User Interface with HTML Create an HTML document named game-intro.html based on the requirements outlined in the game-intro exercise at the end of Chapter 3. The form should execute a program named game-intro.php (you will have a chance to code this at the end of the next chapter). The form should allow the user to type a name for the character, choose the type of character from a drop down list (Dwarf, Elf, Human, or Wizard), choose the number of health tokens to be purchased from a drop down list (0, 10, 20, or 30), choose the number of experience tokens to be purchased from a drop down list (0, 2, 4, 6, 8, or 10), and choose the number of supply tokens to be purchased from a drop down list (0, 25, 50, 75, or 100). The form should be designed to execute a program named gameIntro.php. Use these names for the input fields: charName, charType, healthTokens, expTokens, supplyTokens. Figure 4-12 shows how the form should appear but feel free to play with the exact appearance of the form and if you prefer you can come up with your own character types.
Transcript text: 124 4. Basics of Markup - Creating a User Interface with HTML 5. Create an HTML document named game-intro.html based on the requirements outlined in the game-intro exercise at the end of Chapter 3. The form should execute a program named game-intro.php (you will have a chance to code this at the end of the next chapter). The form should allow the user to type a name for the character, choose the type of character from a drop down list (Dwarf, Elf, Human, or Wizard), choose the number of health tokens to be purchased from a drop down list $(0,10$, 20 , or 30 ), choose the number of experience tokens to be purchased from a drop down list $(0,2,4,6,8$, or 10$)$, and choose the number of supply tokens to be purchased from a drop down list $(0,25,50,75$, or 100$)$. The form should be designed to execute a program named gameIntro.php. Use these names for the input fields: charName, charType, healthTokens, expTokens, supplyTokens. Figure 4-12 shows how the form should appear but feel free to play with the exact appearance of the form and if you prefer you can come up with your own character types. Figure 4-12: game-intro.html
failed

Solution

failed
failed

Solution Steps

Step 1: Create the HTML Structure

Create a new HTML file named game-intro.html and set up the basic HTML structure including the <!DOCTYPE html>, <html>, <head>, and <body> tags.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Character Creation</title>
</head>
<body>
    <!-- Content will be added here -->
</body>
</html>
Step 2: Add the Form Header and Instructions

Within the <body> tag, add a header and instructions for the form.

<body>
    <h1>Character Creation</h1>
    <p>YOU HAVE 10 GOLD PIECES</p>
    <p>1 gold piece buys 10 health tokens</p>
    <p>1 gold piece buys 2 experience tokens</p>
    <p>1 gold piece buys 25 supply tokens</p>
    <!-- Form will be added here -->
</body>
Step 3: Create the Form

Add a form element with the required input fields and dropdown lists as specified.

<body>
    <h1>Character Creation</h1>
    <p>YOU HAVE 10 GOLD PIECES</p>
    <p>1 gold piece buys 10 health tokens</p>
    <p>1 gold piece buys 2 experience tokens</p>
    <p>1 gold piece buys 25 supply tokens</p>
    
    <form action="gameIntro.php" method="post">
        <label for="charName">Name of character:</label>
        <input type="text" id="charName" name="charName" required><br><br>
        
        <label for="charType">Select your character's type:</label>
        <select id="charType" name="charType">
            <option value="dwarf">Dwarf</option>
            <option value="elf">Elf</option>
            <option value="human">Human</option>
            <option value="wizard">Wizard</option>
        </select><br><br>
        
        <label for="healthTokens">Purchase health tokens:</label>
        <select id="healthTokens" name="healthTokens">
            <option value="0">0</option>
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
        </select><br><br>
        
        <label for="expTokens">Purchase experience tokens:</label>
        <select id="expTokens" name="expTokens">
            <option value="0">0</option>
            <option value="2">2</option>
            <option value="4">4</option>
            <option value="6">6</option>
            <option value="8">8</option>
            <option value="10">10</option>
        </select><br><br>
        
        <label for="supplyTokens">Purchase supply tokens:</label>
        <select id="supplyTokens" name="supplyTokens">
            <option value="0">0</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="75">75</option>
            <option value="100">100</option>
        </select><br><br>
        
        <button type="submit">ADD YOUR CHARACTER</button>
    </form>
</body>

Final Answer

The HTML document game-intro.html is created with a form that allows the user to input a character name, select a character type, and choose the number of health, experience, and supply tokens to purchase. The form is designed to submit the data to gameIntro.php.

Was this solution helpful?
failed
Unhelpful
failed
Helpful

Questions asked by other users

failedAnswered
Which of these visualizing strategies would not be the most appropriate for understanding how to build a tornado in a bottle? a. using sensory details to create an image c. visualizing to draw conclusions b. visualizing a sequence of events d. using graphic organizers to sort information
failedAnswered
Look at the diagram below. The line NP and the line MQ will be dilated by a scale factor of 1/4 centered at M to create the line N'P' and the line M'Q, respectively. Select all of the true statements. - The line MQ' will be perpendicular to the line N. - The line N'P will be perpendicular to the line NP. - The line N'P will be parallel to the line NP, but they will not be the same line. - The line M'Q will be the same line as the line MQ.
failedAnswered
Use the given values of n=1205 and p=0.98 to find the maximum value that is significantly low, μ-2σ, and the minimum value that is significantly high, μ+2σ. Round your answer to the nearest hundredth unless otherwise noted.
failedAnswered
Question 13 of 20 Read this sentence: Hunting endangered whales should be outlawed. What type of claim is this sentence? A. Claim of fact B. Claim of policy C. Claim of cause and effect D. Claim of definition
failedAnswered
Sea f:[-7,5] → ℝ la función cuya gráfica se muestra a continuación: Determine, si existen, los siguientes límites: (a) lim x → -4 f(x) (c) lim x → 3 f(x) (e) lim x → 1 f(x) (g) lim x → -2 f(x) (b) lim x → 0 f(x) (d) lim x → 1^- f(x) (f) lim x → -2^- f(x) (h) lim x → -7^+ f(x)