mirror of
https://github.com/jcreek/AssessmentAnalyser.git
synced 2026-07-13 19:03:47 +00:00
Core files with basic layout set up
This commit is contained in:
jcreek
@@ -0,0 +1,38 @@
|
|||||||
|
(function(){
|
||||||
|
// Declare App
|
||||||
|
var app = angular.module('testApp',[]);
|
||||||
|
|
||||||
|
// Create Controller
|
||||||
|
app.controller('testController', function($scope){
|
||||||
|
|
||||||
|
// Data
|
||||||
|
$scope.title = "Hello, World!";
|
||||||
|
$scope.products = [
|
||||||
|
{
|
||||||
|
name: 'Product One',
|
||||||
|
price: 2,
|
||||||
|
forSale: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Product Two',
|
||||||
|
price: 5,
|
||||||
|
forSale: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Product Three',
|
||||||
|
price: 9,
|
||||||
|
forSale: true
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Add Product Functionality
|
||||||
|
$scope.addProduct = function(){
|
||||||
|
$scope.products.push($scope.newProduct);
|
||||||
|
$scope.newProduct = {};
|
||||||
|
};
|
||||||
|
|
||||||
|
// End Controller
|
||||||
|
});
|
||||||
|
|
||||||
|
// End App
|
||||||
|
})();
|
||||||
+188
@@ -0,0 +1,188 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
<link rel="icon" href="bootstrap3/favicon.ico">
|
||||||
|
|
||||||
|
<title>AssessmentAnalyser</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="bootstrap3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||||
|
<link href="bootstrap3/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Custom styles for this template -->
|
||||||
|
<link href="navbar-fixed-top.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
||||||
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Fixed navbar -->
|
||||||
|
<nav class="navbar navbar-default navbar-fixed-top">
|
||||||
|
<div class="container">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="#">Assessment Analyser</a>
|
||||||
|
</div>
|
||||||
|
<div id="navbar" class="navbar-collapse collapse">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li class="active"><a href="#">Home</a></li>
|
||||||
|
<li><a href="#examsetup">Exam Setup</a></li>
|
||||||
|
<li><a href="#studentdataentry">Student Data Entry</a></li>
|
||||||
|
<li class="dropdown">
|
||||||
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Analyses <span class="caret"></span></a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">By Student</a></li>
|
||||||
|
<li><a href="#">By Class</a></li>
|
||||||
|
<li><a href="#">By Cohort</a></li>
|
||||||
|
<li role="separator" class="divider"></li>
|
||||||
|
<li class="dropdown-header">Nav header</li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
<li><a href="#">One more separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="nav navbar-nav navbar-right">
|
||||||
|
<li><a href="#">Default</a></li>
|
||||||
|
<li><a href="#/">Static top</a></li>
|
||||||
|
<li class="active"><a href="#">Fixed top <span class="sr-only">(current)</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!--/.nav-collapse -->
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<!-- Main component for a primary marketing message or call to action -->
|
||||||
|
<div class="jumbotron">
|
||||||
|
<h1>Make assessments easy...</h1>
|
||||||
|
<p>...for teachers to analyse! To use this app, simply set up your exam by entering the question numbers, marks available per question and topics for each question, then input your student data question-by-question, and select an analysis to view from the drop-down menu. </p>
|
||||||
|
<p>Performing a gap analysis to ensure progress for every pupil has never been so easy. </p>
|
||||||
|
<p>
|
||||||
|
<a class="btn btn-lg btn-primary" href="#examsetup" role="button">Get started »</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class='well'>
|
||||||
|
<p>Please enter the following fields:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Assessment title</li>
|
||||||
|
<li>Question number</li>
|
||||||
|
<li>Content tested by the question (be specific)</li>
|
||||||
|
<li>Number of marks available for the question</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id='examsetup' class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h3 class="panel-title">Exam Setup</h3>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<form>
|
||||||
|
Assessment Title: <input type='text' name='asstitle'> <br>
|
||||||
|
AngularJS is probably what I need to use to do the data analysis here - this project is probably best as a single page where users scroll using the persistent nav bar to get to the section they need, unless I can work out a way to make the data persistent across multiple pages without a database...
|
||||||
|
</form>
|
||||||
|
<p>Paste excel data here:</p>
|
||||||
|
<textarea name="another_data" style="width:250px; height: 150px;"></textarea><br>
|
||||||
|
<input type='button' onclick="javascript:generateTable('another_data', 'another_table')" value='Generate Table'/>
|
||||||
|
<br><br>
|
||||||
|
<p>Table data will appear below</p>
|
||||||
|
<hr>
|
||||||
|
<div id='another_table'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id='studentdataentry' class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h3 class="panel-title">Student Data Entry</h3>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<p>Paste excel data here:</p>
|
||||||
|
<textarea name="excel_data" style="width:250px; height: 150px;"></textarea><br>
|
||||||
|
<input type='button' onclick="javascript:generateTable('excel_data', 'excel_table')" value='Generate Table'/>
|
||||||
|
<br><br>
|
||||||
|
<p>Table data will appear below</p>
|
||||||
|
<hr>
|
||||||
|
<div id='excel_table'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id='analysisbycohort' class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h3 class="panel-title">Analysis By Cohort</h3>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div ng-app="testApp">
|
||||||
|
<div ng-controller="testController as test">
|
||||||
|
|
||||||
|
<h1>{{title}}</h1>
|
||||||
|
<ul>
|
||||||
|
<li ng-repeat="product in products" ng-class="{bargain: product.price <= 6}" ng-show="{{product.forSale}}">
|
||||||
|
{{product.name}} - {{product.price | currency: "£"}}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Add Product</h3>
|
||||||
|
<form ng-submit="addProduct()">
|
||||||
|
<label>Name</label>
|
||||||
|
<input type="text" ng-model="newProduct.name"/>
|
||||||
|
<label>Price</label>
|
||||||
|
<input type="number" step="any" ng-model="newProduct.price"/>
|
||||||
|
<label>For Sale</label>
|
||||||
|
<input type="checkbox" ng-model="newProduct.forSale" value="false"/>
|
||||||
|
<input type="submit" value="Submit" />
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div> <!-- /container -->
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p class="text-muted">AssessmentAnalyser was created by Josh Creek. </p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core JavaScript
|
||||||
|
================================================== -->
|
||||||
|
<!-- Placed at the end of the document so the pages load faster -->
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
||||||
|
<script>window.jQuery || document.write('<script src="bootstrap3/assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||||
|
<script src="bootstrap3/dist/js/bootstrap.min.js"></script>
|
||||||
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||||
|
<script src="bootstrap3/assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||||
|
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
|
||||||
|
|
||||||
|
<script src="main.js"></script>
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
var element = document.querySelector("#greeting");
|
||||||
|
element.innerText = "Hello, world!";
|
||||||
|
|
||||||
|
function generateTable(textAreaName,tableID) { // This function is used to enable copy & pasting of data from a spreadsheet directly into the webpage, retaining the rows and columns
|
||||||
|
var data = $('textarea[name='+textAreaName+']').val();
|
||||||
|
//console.log(data); // For testing purposes only
|
||||||
|
var rows = data.split("\n");
|
||||||
|
|
||||||
|
var table = $('<table />');
|
||||||
|
|
||||||
|
for(var y in rows) {
|
||||||
|
var cells = rows[y].split("\t");
|
||||||
|
var row = $('<tr />');
|
||||||
|
for (var x in cells) {
|
||||||
|
row.append('<td>'+cells[x]+'</td>');
|
||||||
|
}
|
||||||
|
table.append(row);
|
||||||
|
}
|
||||||
|
// Insert into DOM
|
||||||
|
$('#'+tableID+'').html(table);
|
||||||
|
}
|
||||||
+27
@@ -0,0 +1,27 @@
|
|||||||
|
body {
|
||||||
|
padding-top: 70px;
|
||||||
|
margin-bottom: 60px; /* Margin bottom by footer height */
|
||||||
|
}
|
||||||
|
|
||||||
|
#greeting {
|
||||||
|
background-color: #F8F8F8;
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
font-size: 24px;
|
||||||
|
margin: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
width: 100%;
|
||||||
|
height: 60px; /* Set the fixed height of the footer here */
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .container {
|
||||||
|
width: auto;
|
||||||
|
max-width: 680px;
|
||||||
|
padding: 0 15px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.footer .container .text-muted {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user