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
Is the following relation a function?
failedAnswered
A card is drawn from a well-shuffled deck of 52 cards. Find the probability that the card is a black card or a 3.
failedAnswered
Perform the indicated operation and simplify. Assume the variable y represents a nonnegative real number sqrt(8y) * sqrt(2y^4) + 5y^2 sqrt(y) (Simplify your answer. Type an exact answer, using radicals as needed.)
failedAnswered
PREGUNTA EQUIVALE 6 PUNTOS. Existen 2 lineas puras AAbb (color negro determinado por el gen A y el gen a determina color blanco; además orejas erectas B y orejas caídas por el gen b. Ambos locus con dominancia completa) y aaBB que se cruzan generando F1 individuos normales di-híbridos AaBb con pelo color negro y orejas erectas. Las hembras F1 se cruzan con machos de pelo blanco y Orejas caídas generando los siguientes descendientes en F2. FENOTIPOS F2 OBSERVADOS ESPERADOS Negros con orejas erectas 210 Negros con orejas caídas 22 Blanco con orejas erectas 28 Blanco con orejas caídas 220 TOTAL 480 1. Plantea la Prueba de hipótesis que utilizara para saber si ambos locus se segregan independientes entre si. 2. Realice la demostración estadística para validar la Prueba de Hipótesis (X2 tabular es 7,81). 3. Cuál es la Frecuencia de Recombinantes y la distancia genética entre ambos genes.
failedAnswered
Block 1 and block 2 have the same mass, m, and are released from the top of two inclined planes of the same height making 30° and 60° angles with the horizontal direction, respectively. If the coefficient of friction is the same in both cases, which of the blocks is going faster when it reaches the bottom of its respective incline? We must know the actual masses of the blocks to answer. Both blocks have the same speed at the bottom. Block 1 is faster. Block 2 is faster.