<div class="pull-right panel panel-default">
    <div class="panel-heading">
        <span>Velg dokumentmodus:</span>
    </div>
    <div class="panel-body">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default btn-warning record active">
                <input type="radio" value="Oppsett" name="Mode" checked="checked" /><span class="glyphicon glyphicon-record"></span>
                Oppsett
            </label>
            <label class="btn btn-default exec">
                <input type="radio" value="Exec" name="Mode" /><span class="glyphicon glyphicon-play"></span>
                Utf&oslash;ring
            </label>
        </div>
    </div>
</div>
<h1>Dokumenttittel</h1>

<p class="lead rec">Sett opp din spesifikasjon for test her. Lag kopier av dokumentet og benytt disse som sjekklister under testing ved å fylle ut statusfeltene og avvikslisten nederst.</p>
<p class="lead exe desc"></p>

<div class="panel panel-primary rec">
    <div class="panel-heading">
        Beskrivelse
    </div>
    <div class="panel-body">
        <span>Beskriv hva som testes og n&aring;r testen skal anvendes</span>
        <textarea data-func="autogrow" name="Rutinebeskrivelse"></textarea>
    </div>
</div>


<section class="rec">
    <h2>Relaterte dokumenter og lenker <button data-action="add" data-target="Relaterte">Legg til dokument</button></h2>
    <div class="panel panel-primary">
        <div class="panel-heading">
            Legg til henvisninger til relaterte spesifikasjoner, dokumentasjon osv.
        </div>
        <div class="panel-body">
            <div data-array="Relaterte">
                <div class="row form-group">
                    <div class="col-lg-10 col-md-9 col-sm-9 col-xs-8">
                        <input type="text" required="required" name="Dokumentnavn" placeholder="Oppgi dokumentnavn her" />
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-3 col-xs-4">
                        <button data-action="remove"></button>
                        <button data-action="sort"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="exe">
    <h2>
        Utf&oslash;ringsdetaljer
        <button title="Klargj&oslash;r for ny gjennomf&oslash;ring" type="button" class="btn btn-default" onclick="nullstill();">
            <span class="glyphicon glyphicon-refresh"></span>
            Nullstill resultater
        </button>
    </h2>
    <div class="panel panel-primary">
        <div class="panel-heading">
            Fyll ut informasjon om utf&oslash;ringen av testen.
        </div>
        <div class="panel-body form-group">
            <div class="form-group">
                <label class="control-label">Beskrivelse</label>
                <textarea name="Beskrivelse" placeholder="Beskrivelse (i hvilken forbindelse utf&oslash;res testen)" data-func="autogrow"></textarea>
            </div>
            <div class="row form-group">
                <div class="col-xs-6 col-sm-4">
                    <label>Utf&oslash;rt av</label>
                    <input type="text" name="Bruker" placeholder="Ditt navn" />
                </div>
                <div class="col-xs-6 col-sm-4">
                    <label>Sted</label>
                    <input type="text" name="Sted" placeholder="Hvor utf&oslash;res testen" />
                </div>
                <div class="col-xs-6 col-sm-2">
                    <label>Dato</label>
                    <input type="date" name="Testdato" />
                </div>
                <div class="col-xs-6 col-sm-2">
                    <label>Tid</label>
                    <input type="time" name="Testtid" />
                </div>
            </div>
        </div>
    </div>
</section>



<h2>Tester</h2>
<div data-array="Kapitler">
    <div class="panel panel-primary">
        <div class="panel-heading">
            Testkapittel
            <div class="pull-right">
                <button class="btn btn-sm" data-action="remove">Slett testkapittel</button>&nbsp;
                <button class="btn btn-sm" data-action="add" data-target="Brukstilfeller">Legg til brukstilfelle</button>
                <button class="btn btn-sm" data-action="sort"></button>
            </div>
            <div class="clearfix"></div>
            <p></p>

            <div class="input-group input-group-lg">
                <input name="Kapittelnavn" type="text" placeholder="Legg inn kapittelnavn" class="input-lg exelabel" style="font-size:x-large;" />
                <span class="input-group-btn" data-toggle="buttons">
                    <label class="btn btn-default active">
                        <input type="checkbox" checked="checked" name="Expand" data-func="collapse" data-container=".panel" data-body=">.panel-body" />
                        <span class="glyphicon glyphicon-plus"></span>
                    </label>
                </span>
            </div>
        </div>
        <div class="panel-body">



            <div data-array="Brukstilfeller">


                <div data-columns="1" class="alert alert-info">
                    <div>
                        <span class="pull-right btn-group rec">
                            <button data-action="remove" class="hidden-xs">Slett brukstilfelle</button>
                            <button data-action="clone" class="hidden-xs">Dupliser brukstilfelle</button>
                            <button data-action="add" data-target="Testliste" class="hidden-xs">Ny test case</button>
                            <button data-action="remove" class="visible-xs"></button>
                            <button data-action="clone" class="visible-xs"></button>
                            <button data-action="add" data-target="Testliste" class="visible-xs"></button>
                            <button data-action="sort"></button>
                        </span>
                        <h3>Brukstilfelle</h3>
                    </div>

                    <div class="input-group input-group-lg">
                        <input name="Brukstilfelle" type="text" class="input-lg exelabel" placeholder="Navn p&aring; brukstilfelle" />
                        <span class="input-group-btn" data-toggle="buttons">
                            <label class="btn btn-default active">
                                <input type="checkbox" checked="checked" name="Expand" data-func="collapse" data-container=".alert" data-body=".collapsable" />
                                <span class="glyphicon glyphicon-plus"></span>
                            </label>
                        </span>
                    </div>
                    <div class="collapsable">
                        <div>
                            <div class="row visible-lg">
                                <div class="col-lg-5">Test case</div>
                                <div class="col-lg-4">Forventet resultat</div>
                                <div class="col-lg-2 exe">Status</div>
                            </div>
                            <div data-array="Testliste">
                                <div class="testcase step">
                                    <div class="row visible-xs">
                                        <label class="col-xs-12">Test case</label>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-lg-5 col-md-3"><textarea data-func="autogrow" class="exelabel" name="TestCase" placeholder="Test case"></textarea></div>
                                        <div class="col-lg-4 col-md-3"><textarea data-func="autogrow" class="exelabel" name="ForventetResultat" placeholder="Forventet resultat"></textarea></div>
                                        <div class="col-lg-3 col-md-4 col-xs-8 exe">
                                            <div class="btn-group" data-toggle="buttons" data-func="radio">
                                                <label class="btn btn-default">
                                                    <input type="checkbox" name="OK" /><span class="glyphicon glyphicon-ok"></span>
                                                    OK
                                                </label>
                                                <label class="btn btn-default">
                                                    <input type="checkbox" name="Pass" /><span class="glyphicon glyphicon-remove"></span>
                                                    Pass
                                                </label>
                                                <label class="btn btn-default">
                                                    <input type="checkbox" name="Feil" /><span class="glyphicon glyphicon-thumbs-down"></span>
                                                    Feil
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-xs-4 pull-right rec"><button data-action="clone"></button><button data-action="remove"></button><button data-action="sort"></button></div>
                                    </div>
                                    <div class="panel panel-warning">
                                        <div class="panel-heading">Feilbeskrivelse</div>
                                        <div class="row panel-body form-horizontal">
                                            <div class="col-lg-6">
                                                <label class="control-label">Feilbeskrivelse</label>
                                                <textarea name="Feilbeskrivelse" data-func="autogrow" placeholder="Beskriv feilen og hvordan denne gjenskapes"></textarea>
                                            </div>
                                            <div class="col-lg-6">
                                                <label class="control-label">&Oslash;nsket utbedring</label>
                                                <textarea name="Utbedring" data-func="autogrow" placeholder="Avtal og oppgi &oslash;nsket utbedring for feilen"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <button data-action="add" data-target="Testliste">Ny test case</button>
                    </div>
                </div>

            </div>
            <nav>
                <button data-action="add" data-target="Brukstilfeller">Legg til brukstilfelle</button>
            </nav>
            <p></p>
        </div>
    </div>
</div>

<p>
    <button data-action="add" class="btn-lg" data-target="Kapitler">Legg til testkapittel</button>
</p>

.alert h3 {
    margin-top: 0;
    padding-top: 0;
}

var recMode = true;

function AttachDocEvents($e) {
$e.find(".btn-group input[type=checkbox],.btn-group input[type=radio]").change(UpdateColors);
$e.find(".panel-warning").hide();
$e.find("[name=Rutinebeskrivelse]").change(function () {
    $(".desc").html($(this).val());
});
UpdateVisibility($e);
}

function UpdateVisibility(item) {
if (recMode) {
    item.find(".exe").hide();
    item.find(".rec, [data-action]").show();
    $(".exelabel").prop("disabled", false);
} else {
    item.find(".rec, [data-action]").hide();
    item.find(".exe").show();
    $(".exelabel").prop("disabled", true);
}
}

function nullstill() {
$("label.btn input[type=checkbox]:checked").prop("checked", false).click().change();
$("textarea[name=Feilbeskrivelse], textarea[name=Utbedring]").val("");
UpdateCalculations();
}

function UpdateColors() {
var $input = $(this);
var checked = $input.prop("checked");
var name = $input.attr("name");
var $label = $input.closest("label");
var $group = $input.closest(".btn-group");
var value = $input.val();

if ($label.hasClass("record")) {
    recMode = true;
    UpdateVisibility($("form"));
}

if (value == "Exec") {
    recMode = false;
    UpdateVisibility($("form"));
}

if ((name === "OK" || value === "Exec") && checked === true) {
    $label.addClass("btn-success");
    $group.find("label").removeClass("btn-warning");
}
if (name === "Pass" || checked !== true) {
    $group.find("label").removeClass("btn-success");
    $group.find("label").removeClass("btn-warning");
}
if ((name === "Feil" || value === "Oppsett") && checked === true) {
    $label.addClass("btn-warning");
    $group.find("label").removeClass("btn-success");
}

$(".panel-warning").hide();
$("label.btn input[name=Feil]:checked").closest(".step").find(".panel-warning").show();
}

Output templates

Templates used for document and web page generation: