UserStories

#agile-user-stories {
    display: none;
}
#agile-user-stories-toggle {
    float: right;
}

div.user-story:hover {
    background-color: #dfffdf;
}
.user-story dl {
    margin: 0;
    padding: 0;
    border-bottom: dotted 1px #dfdfdf;
    text-align: right;
}
.user-story dt {
    display: none;
}
.user-story dd,
#pageText .user-story dd {
    display: inline;
    margin: 0;
    padding: 4px 5px 4px 20px;
    background: transparent url() no-repeat left center;
}
.user-story dd.priority,
#pageText .user-story dd.priority {
    xbackground-color: #dfffdf;
    background-image: url(/skins/common/icons/silk/exclamation.png);
}
.user-story dd.estimate,
#pageText .user-story dd.estimate {
    xbackground-color: #dfdfdf;
    background-image: url(/skins/common/icons/silk/information.png);
}
.user-story a {
    color: #000;
    text-decoration: none;
    border-bottom: none;
}

dekiapi();
<button id="agile-user-stories-toggle">"Add User Story"</button>
<form class="deki-form" id="agile-user-stories">
    <fieldset>
    <div class="field">
        <label>"As a"</label>
        <input type="text" name="role" value="user" />
    </div>
    <div class="field">
        <label>"I want"</label><input type="text" name="something" value="something" />
    </div>
    <div class="field">
        <label>"so that"</label>
        <textarea name="benefit">"(benefit)"</textarea>
    </div>
    </fieldset>
    <fieldset>
    <div class="field">
        <label>"Priority"</label>
        <select name="priority">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>

        <label>"Estimate"</label>
        <select name="estimate">
            <option>1</option>
            <option selected="selected">2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    </fieldset>
    <div class="submit">
        <button id="add">"Add story"</button>
    </div>
</form>

$(function() {
    var $form = $('#agile-user-stories');
    var $button = $('#agile-user-stories-toggle').click(function(e) {
        $form.show();
        $(this).hide();
    });
    $form.find('[name=role]').focus();
    $form.submit(function(e) { addUserStory(); return false; });
    function addUserStory()
    {
        var role = $form.find('[name=role]').val();
        var something = $form.find('[name=something]').val();
        var benefit = $form.find('[name=benefit]').val();
        var estimate = $form.find('[name=estimate]').val();
        var priority = $form.find('[name=priority]').val();
        
        var story = "As a " + role + " I want " + something + " so that " + benefit;
        var contents = [
            '<div id="agile-user-story-'+(new Date().getTime())+'" class="user-story">',
            '<a href="./'+ encodeURIComponent(story) +'" class="description">'+story+'</a>',
            '<dl class="value">',
            "<dt>Priority</dt>",
            '<dd class="priority">'+priority+'</dd>',
            "<dt>Estimate</dt>",
            '<dd class="estimate">'+estimate+'</dd>',
            "</dl>",
            "</div>"
        ];
        contents = contents.join('');
        
        var pageApi = Deki.Env.PageApi;
        var params = {
            section: 0
        };
        MindTouch.Deki.UpdatePageContents(pageApi, contents, params, function() {
            $('#pageText').append(contents);
            $form.find('[name=something]').val('');
            $form.find('[name=benefit]').val('');
            $form.find('[name=something]').focus();
        });
    };
});