Guide Tutorial Part 1

tutorial1.html

<div>
    <h3>Castle Falkenstein Dramatic Character</h3>
    <span>Name</span><input type="text" name="attr_character_name">
    <span>Hero Type</span>
    <select name="attr_hero_type">
        <option selected>Heroic Hero</option>
        <option>Tragic Hero</option>
        <option>Flawed Hero</option>
        <option>Innocent Heroine</option>
        <option>Clever Heroine</option>
        <option>Tragic Heroine</option>
        <option>Fallen Heroine</option>
    </select>
    <span>Archetype</span>
    <input type="text" name="attr_archetype" list="archetypes" placeholder="Choose Archetype">
    <textarea name="attr_diary" placeholder="Write Your Diary"></textarea>
</div>
<br>
<div>
    <h3>Abilities</h3>
    <div>
        <input type="text" name="attr_ability_title" value="ABILITY" readonly>
        <input type="text" name="attr_rank_title" value="RANK" readonly>
    </div>
    <div>
        <input type="text" name="attr_ability1" list="abilities">
        <select name="attr_rank1">
            <option value="2">Poor</option>
            <option value="4" selected>Average</option>
            <option value="6">Good</option>
            <option value="8">Great</option>
            <option value="10">Exceptional</option>
            <option value="12">Extraordinary</option>
        </select>
        <button type="roll" name="roll_ability1" value="@{show_name}@{ability1}\nScore: [[@{rank1} + @{card_value}]]"></button>
    </div>
    <div>
        <input type="text" name="attr_ability2" list="abilities">
        <select name="attr_rank2">
            <option value="2">Poor</option>
            <option value="4" selected>Average</option>
            <option value="6">Good</option>
            <option value="8">Great</option>
            <option value="10">Exceptional</option>
            <option value="12">Extraordinary</option>
        </select>
        <button type="roll" name="roll_ability2" value="@{show_name}@{ability2}\nScore: [[@{rank2} + @{card_value}]]"></button>
    </div>
    <div>
        <input type="text" name="attr_ability3" list="abilities">
        <select name="attr_rank3">
            <option value="2">Poor</option>
            <option value="4" selected>Average</option>
            <option value="6">Good</option>
            <option value="8">Great</option>
            <option value="10">Exceptional</option>
            <option value="12">Extraordinary</option>
        </select>
        <button type="roll" name="roll_ability3" value="@{show_name}@{ability3}\nScore: [[@{rank3} + @{card_value}]]"></button>
    </div>
    <div>
        <input type="text" name="attr_ability4" list="abilities">
        <select name="attr_rank4">
            <option value="2">Poor</option>
            <option value="4" selected>Average</option>
            <option value="6">Good</option>
            <option value="8">Great</option>
            <option value="10">Exceptional</option>
            <option value="12">Extraordinary</option>
        </select>
        <button type="roll" name="roll_ability4" value="@{show_name}@{ability4}\nScore: [[@{rank4} + @{card_value}]]"></button>
    </div>
    <div>
        <input type="text" name="attr_ability5" list="abilities">
        <select name="attr_rank5">
            <option value="2">Poor</option>
            <option value="4" selected>Average</option>
            <option value="6">Good</option>
            <option value="8">Great</option>
            <option value="10">Exceptional</option>
            <option value="12">Extraordinary</option>
        </select>
        <button type="roll" name="roll_ability5" value="@{show_name}@{ability5}\nScore: [[@{rank5} + @{card_value}]]"></button>
    </div>
    <div>
        <input type="text" name="attr_ability6" list="abilities">
        <select name="attr_rank6">
            <option value="2">Poor</option>
            <option value="4" selected>Average</option>
            <option value="6">Good</option>
            <option value="8">Great</option>
            <option value="10">Exceptional</option>
            <option value="12">Extraordinary</option>
        </select>
        <button type="roll" name="roll_ability6" value="@{show_name}@{ability6}\nScore: [[@{rank6} + @{card_value}]]"></button>
    </div>
    <div>
        <input type="text" name="attr_ability7" list="abilities">
        <select name="attr_rank7">
            <option value="2">Poor</option>
            <option value="4" selected>Average</option>
            <option value="6">Good</option>
            <option value="8">Great</option>
            <option value="10">Exceptional</option>
            <option value="12">Extraordinary</option>
        </select>
        <button type="roll" name="roll_ability7" value="@{show_name}@{ability7}\nScore: [[@{rank7} + @{card_value}]]"></button>
    </div>
    <div>
        <input type="text" name="attr_ability8" list="abilities">
        <select name="attr_rank8">
            <option value="2">Poor</option>
            <option value="4" selected>Average</option>
            <option value="6">Good</option>
            <option value="8">Great</option>
            <option value="10">Exceptional</option>
            <option value="12">Extraordinary</option>
        </select>
        <button type="roll" name="roll_ability8" value="@{show_name}@{ability8}\nScore: [[@{rank8} + @{card_value}]]"></button>
    </div>
</div>
<div>
    <h3>Belongings</h3>
    <span>Money: </span><input type="text" name="attr_money" value="0">
    <textarea name="attr_items" placeholder="Enter Items Carried"></textarea>
</div>
<div>
    <h3>Configuration</h3>
    <label>Ask For Card Value: <input type="checkbox" name="attr_card_value" value="?{Modifier?|0}"></label>
    <h4>Show Name on Roll Output</h4>
    <label>Show Name: <input type="radio" name="attr_show_name" value="**@{character_name}** rolls " checked></label></label>
    <label>Hide Name: <input type="radio" name="attr_show_name" value=" "></label></label>
</div>

<!-- Datalists put at the end to avoid confusion -->
<datalist id="archetypes">
    <option>Adventuress</option>
    <option>Anarchist</option>
    <option>Brownie</option>
    <option>Calculation Engineer</option>
    <option>Consulting Detective</option>
    <option>Dashing Hussar</option>
    <option>Demimondaine</option>
    <option>Diplomat</option>
    <option>Dragon Lord</option>
    <option>Dwarf Craftsman</option>
    <option>Explorer</option>
    <option>Faerie Lord/Lady</option>
    <option>Gentleman Thief</option>
    <option>Gentleman/Woman</option>
    <option>Inventor</option>
    <option>Journalist</option>
    <option>Mad Scientist</option>
    <option>Mastermind</option>
    <option>Nobleman/Woman</option>
    <option>Performer</option>
    <option>Physician</option>
    <option>Pixie</option>
    <option>Rogue</option>
    <option>Scientist</option>
    <option>Secret Agent</option>
    <option>Soldier of Fortune</option>
    <option>Steam Engineer</option>
    <option>Wizard</option>
    <option>Writer</option>
</datalist>
<datalist id="hero_type">
    <option>Heroic Hero</option>
    <option>Tragic Hero</option>
    <option>Flawed Hero</option>
    <option>Innocent Heroine</option>
    <option>Clever Heroine</option>
    <option>Tragic Heroine</option>
    <option>Fallen Heroine</option>
</datalist>
<datalist id="abilities">
    <option value="Athletics ♣">Athletics</option>
    <option value="Charisma ♥">Charisma</option>
    <option value="Comeliness ♥">Comeliness</option>
    <option value="Connections ♠">Connections</option>
    <option value="Courage ♥">Courage</option>
    <option value="Education ♦">Education</option>
    <option value="Etherealness ♣">Etherealness</option>
    <option value="Exchequer ♠">Exchequer</option>
    <option value="Fencing ♣">Fencing</option>
    <option value="Fisticuffs ♣">Fisticuffs</option>
    <option value="Gambling ♦">Gambling</option>
    <option value="Glamour ♥">Glamour</option>
    <option value="Helmsmanship ♦">Helmsmanship</option>
    <option value="Kindred Powers ♦">Kindred Powers</option>
    <option value="Marksmanship ♣">Marksmanship</option>
    <option value="Perception ♦">Perception</option>
    <option value="Performance ♥">Performance</option>
    <option value="Physician ♦">Physician</option>
    <option value="Physique ♣">Physique</option>
    <option value="Social Graces ♠">Social Graces</option>
    <option value="Sorcery ♦">Sorcery</option>
    <option value="Stealth ♣">Stealth</option>
    <option value="Tinkering ♦">Tinkering</option>
</datalist>