eg-simple-scratch

by Thunder Hemlock

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<!--START OF EXTERNAL HEADER-->
<div data-role="header" data-theme="a" data-position="fixed" id="site-header">
    <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-btn-left"> 
        <a href="#info-panel" class="ui-btn ui-btn-clear ui-icon-left ui-btn-icon-notext ui-corner-all ui-icon-bars">Info</a>
        <a href="#test-page" class="ui-btn ui-btn-clear ui-icon-left ui-btn-icon-notext ui-corner-all ui-icon-cloud">Dropbox</a>
        <a href="#fileSelect-popup" data-rel="popup" data-transition="slidedown" class="ui-btn ui-btn-clear ui-btn-icon-notext ui-corner-all ui-icon-arrow-d">File</a>
        <a href="#export" class="ui-btn ui-btn-clear ui-icon-left ui-btn-icon-notext ui-corner-all ui-icon-arrow-u">Export</a> 
    </div>
     <h3>Essay Grader</h3>
    <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-btn-right"> 
       <a href="#comment-interface" class="ui-btn ui-btn-clear ui-icon-right ui-corner-all">Save/New</a>
       <a href="#popup-outside-page" data-rel="popup" data-transition="slidedown" class="ui-btn ui-btn-clear ui-icon-right ui-btn-icon-notext ui-corner-all ui-icon-bullets">List</a>
       <a href="#doc-panel" class="ui-btn ui-btn-clear ui-icon-right ui-btn-icon-notext ui-corner-all ui-icon-eye" id="preview">Preview</a>
    </div>
</div>

<!-- START OF INTERFACE PAGE -->
<div data-role="page" data-title="Essay Grader" class="ui-page ui-page-theme-a" id="commentInterface">
    <div role="main" class="ui-content">
        <ul class="unstyled" data-bind="foreach: apps">
            <li>
                <label>
                    <input type="checkbox" data-bind="name: commentLabel, value: commentText, checked: $parent.selectedItems" />
                    <span data-bind="text: commentLabel"></span>
                </label>
            </li>
        </ul>
        <h3 class="ui-bar ui-bar-a ui-corner-all">Display...

CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.info-panel-heading {
    text-align: center;
}
.home-page {
    width: 100%;
    height: 100%;
}
.home-page-center {
    text-align:center;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    background-color:transparent;
}
.home-page-center p {
    color: grey;
}
.unstyled
{
    list-style:none;
    margin:0;
    padding:0;
}

label
{
    cursor:pointer;
}

JavaScript

//GLOBAL ARRAY FOR DOCUMENTS CREATION AND EMAIL ATTACHMENT
var databaseArray = [];
var feedbackArray = [];

//KNOCKOUT DYNAMIC UI SCRIPT
var viewModel = function () {
    var self = this;
    self.apps = [{
        commentLabel: 'tab-1-column-1-comment-1',
        commentText: 'Comment text for tab-1-column-1-comment-1.'
    }, {
        commentLabel: 'tab-1-column-1-comment-2',
        commentText: 'Comment text for tab-1-column-1-comment-2.'
    }, {
        commentLabel: 'tab-1-column-1-comment-3',
        commentText: 'Comment text for tab-1-column-1-comment-3.'
    }, {
        commentLabel: 'tab-1-column-1-comment-4',
        commentText: 'Comment text for tab-1-column-1-comment-4.'
    }];

    self.selectedItems = ko.observableArray([]);
}
var vm = new viewModel();
ko.applyBindings(vm);

//EXTERNAL NAVBAR SCRIPT
$(function () {
    $("[data-role='navbar']").navbar();
    $("[data-role='header'], [data-role='footer']").toolbar();
});
$(document).on("pagecontainershow", function () {
    var current = $(".ui-page-active").jqmData("title");
    $("[data-role='header'] h3").text(current);
    $("[data-role='navbar'] a.ui-btn-active").removeClass("ui-btn-active");
    $("[data-role='navbar'] a").each(function () {
        if ($(this).text() === current) {
            $(this).addClass("ui-btn-active");
        }
    });
}); <!--/external navbar script-->