Skip to content

Prim in player testbench #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Meratyn wants to merge 3 commits into
base: jaal2.0
Choose a base branch
from
Open

Prim in player testbench #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
353473f
Export gradable property from JSAV-min.js
Meratyn Aug 19, 2022
0905ffb
Initial working JAAL 2.0 version of player
Meratyn Sep 16, 2022
51d1ec1
Prim in player testbench
Meratyn Sep 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions player.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ function initializeAnimationView(submission, detailed) {
function initializeModelAnswerView(submission) {
const modelAnswer = submission.definitions.modelAnswer;
if (modelAnswer.length > 0) {
var initialStateHTML = getModelAnswerInitialHTML(modelAnswer);
var initialStateHTML = submission.initialState.modelSvg;
} else {
$('#model-answer-container').html('<h3>No model answer data</h3>');
return;
Expand Down Expand Up @@ -164,8 +164,8 @@ function getModelAnswerInitialHTML(modelAnswer) {
* @returns a list of the modelAnswer steps with type click.
*/
function getModelAnswerSteps(modelAnswer) {
// modelAnswer.shift();
return modelAnswer.filter(step => step.type === 'click');
modelAnswer = modelAnswer.flat();
return modelAnswer.filter(step => step.gradable === true);
}

/**
Expand Down
153 changes: 153 additions & 0 deletions testbench/OpenDSA/AV/Development/PrimAVPE-scaffolded+player.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html>
<head>
<title>Prim's Algorithm Proficiency Exercise</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../../JSAV/css/JSAV.css" type="text/css" />
<link rel="stylesheet" href="../../lib/odsaAV-min.css" type="text/css" />
<link rel="stylesheet" href="../../lib/odsaStyle-min.css" type="text/css" />
<link rel="stylesheet" href="PrimAVPE-scaffolded.css" />
<link rel="stylesheet" href="../../lib/jsav-exercise-player.css">
<script>
// Global variable to signal the existence of test bench
window.jaalTestBench = true;
</script>
<style>
body {
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<table class="proHeaderTable">
<tr>
<td class="headerLeft">
<input type="button" id="help" name="help" value="Help" />
</td>
<td class="headerCenter">
<p class="jsavexercisecontrols"></p>
</td>
<td class="headerRight">
<input type="button" id="about" name="about" value="About" />
<a id="settings" class="jsavsettings" href="#">Settings</a>
</td>
</tr>
</table>
<form class="avcontainer">
<div class="jsavcanvas">
<p class="instructLabel"></p>
<p class="instructions"></p>
<p id="procontrols">
<span class="jsavscore"></span>
</p>
</div>
</form>
</div>
<script src="../../lib/jquery.min.js"></script>
<script src="../../lib/jquery-ui.min.js"></script>
<script src="../../JSAV/lib/jquery.transit.js"></script>
<script src="../../JSAV/lib/raphael.js"></script>
<script src="../../JSAV/build/JSAV-min.js"></script>
<script src="../../DataStructures/binaryheap.js"></script>
<script src="../../lib/odsaUtils-min.js"></script>
<script src="../../lib/odsaAV-min.js"></script>
<script src="graphUtils.js"></script>
<script src="../../lib/jsav-exercise-recorder-bundle.js"></script>
<script src="../../lib/jsav-exercise-player-bundle.js"></script>
<script src="PrimAVPE-scaffolded.js"></script>

<h2>JSAV Exercise Player</h2>

<div id="jaalPlayerModal" class="jaalModalContent">
<span class="jaal-close" id="close-player-modal">&times;</span>


<div class="player-controls">
<div class="view-control">
<button type="button" id="compare-view-button" disabled="" >Compare with model answer</button>
<button type="button" id="detailed-view-button" >See all submission actions</button>
</div>
<div class="speed-control">
<label for="speed">Animation Speed:</label>
<input type="range" id="speed" name="speed" value="-1000" step="200" min="-2000" max="-200">
<button id="jaal">JAAL</button>
<button id="export">Export</button>
</div>
</div>

<div class="compare-view">
<div class="view-control">
<div class="auto-animation">
<button class="animation-button animation-play-pause" id="compare-view-play-pause-button"></button>
<button class="animation-button animation-stop" id="compare-view-stop-button"></button>
</div>
<div class="slide-show">
<button id="compare-view-to-beginning">&lt;&lt;</button>
<button id="compare-view-step-backward">&lt;</button>
<button id="compare-view-step-forward">&gt;</button>
<button id="compare-view-to-end">&gt;&gt;</button>
</div>
</div>
</div>

<div class="detailed-view" style="display: none">
<h4>In this mode you can see all the click actions and if the model answer was opened</h4>
</div>

<!-- Student's answer view -->
<div class="views-container">
<div class="animation-view">
<div class="view-control">
<div class="auto-animation">
<button class="animation-button animation-play-pause" id="play-pause-button"></button>
<button class="animation-button animation-stop" id="stop-button"></button>
</div>
<div class="slide-show">
<button id="to-beginning">&lt;&lt;</button>
<button id="step-backward">&lt;</button>
<button id="step-forward">&gt;</button>
<button id="to-end">&gt;&gt;</button>
</div>
</div>
<div id="animation-container"></div>
</div>

<!-- Model answer view -->
<div class="model-answer-view">
<div class="view-control">
<div class="auto-animation">
<button class="animation-button animation-play-pause" id="model-answer-play-pause-button"></button>
<button class="animation-button animation-stop" id="model-answer-stop-button"></button>
</div>
<div class="slide-show">
<button id="model-answer-to-beginning">&lt;&lt;</button>
<button id="model-answer-step-backward">&lt;</button>
<button id="model-answer-step-forward">&gt;</button>
<button id="model-answer-to-end">&gt;&gt;</button>
</div>
</div>
<div id="model-answer-container" class="jsavcanvas"></div>
</div>
</div>

<!-- JSON tree view for JAAL data -->
<div id="jaalTreeModal" class="jaalModal">
<div class="jaalModalContent">
<div>
<span class="jaal-close" id="jaalTreeModal-close">&times;</span>
</div>
<div>
<p>JSON Algorithm Animation Language (JAAL) viewer</p>
<label for="html-to-string">Display JAAL HTML content as string</label>
<input type="checkbox" id="html-to-string" value="">
<button type="button" id="show-jaal">Show</button>
<div id="jaalTreeContent"></div>
</div>
</div>
</div>

</div> <!-- .jaalModalContent -->

</body>
</html>
58 changes: 58 additions & 0 deletions testbench/OpenDSA/AV/Development/PrimAVPE-scaffolded+player.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
{
"translations" :{
"en": {
".avTitle": "Prim's Algorithm Proficiency Exercise",
"av_Authors": "Mohammed Fawzi, Kasper Hellström, Artturi Tilanterä",
".instructLabel": "Instructions:",
".instructions": "Reproduce the behavior of Prim's Algorithm for the given graph below. Click on the appropriate <strong>edges</strong> to add them to the MST. Start with Node A. In case of similar weights add nodes alphabetically.",
"av_ms_mst": "Complete minimum spanning tree",
"av_ms_select_a": "Start by selecting node A",
"av_ms_select_node": "Select {node}, since it's closest to the MCST.",
"av_ms_add_edge": "Add edge ({from}, {to}) to the MCST.",
"av_ms_unreachable": "The nearest unvisited node is at infinite distance. The algorithm ends.",
"av_ms_update_distances": "Update distance to {node}'s neighbors. For updated nodes, set closest node to {node}",
"av_ms_visit_neighbor_add": "Update {node}'s neighbors' distances. Node {neighbor}:<br>The current distance to {neighbor} is infinite. Add {neighbor} to the priority queue and the distance table. Set {neighbor}'s parent to {node}.",
"av_ms_visit_neighbor_update": "Update {node}'s neighbors' distances. Node {neighbor}:<br>The distance to {neighbor} from {node} is shorter than the one previously discovered. Update the distance in the priority queue and the table. Set {neighbor}'s parent to {node}.",
"av_ms_visit_neighbor_no_action": "Update {node}'s neighbors' distances. Node {neighbor}:<br>The distance to {neighbor} from {node} is longer or equal than the one previously discovered. Do not update the distance.",
"#help": "Help",
"#about": "About",
"#enqueue": "Enqueue",
"#update": "Update",
"#dequeue": "Dequeue",
"priority_queue": "Priority Queue",
"node": "Node",
"distance": "Distance",
"parent": "Parent",
"edge": "Edge"
},
"fi": {
".avTitle": "Primin algoritmi",
"av_Authors": "Mohammed Fawzi, Kasper Hellström",
".instructLabel": "Ohjeet:",
".instructions": "Lisää särmät pienimpään virityspuuhun Primin algoritmin antamassa järjestyksessä. Aloita läpikäynti solmusta A. Klikkaa <strong>särmiä</strong> lisätäksesi ne virityspuuhun. Jos kahdella särmällä on sama paino, kaari, jonka solmut ovat aakkosjärjestyksessä ensimmäisenä.",
"av_ms_mst": "Verkon pienin virityspuu",
"av_ms_select_a": "Aloitetaan valitsemalla solmu A.",
"av_ms_select_node": "Valitaan solmu {node}, koska se sijaitsee lähinnä virityspuuta.",
"av_ms_add_edge": "Lisätään särmä ({from}, {to}) virityspuuhun.",
"av_ms_unreachable": "Etäisyys lähimpään solmuun, jossa ei ole vierailtu, on ääretön. Algoritmi päättyy.",
"av_ms_update_distances": "Päivitetään etäisyyksiä {node}-solmun naapureihin. Päivitetyille solmuille asetetaan lähin solmu {node}:ksi.",
"av_ms_visit_neighbor_add": "Update {node}'s neighbors' distances. Node {neighbor}:<br>The current distance to {neighbor} is infinite. Add {neighbor} to the priority queue and the distance table. Set {neighbor}'s parent to {node}.",
"av_ms_visit_neighbor_update": "Update {node}'s neighbors' distances. Node {neighbor}:<br>The distance to {neighbor} from {node} is shorter than the one previously discovered. Update the distance in the priority queue and the table. Set {neighbor}'s parent to {node}.",
"av_ms_visit_neighbor_no_action": "Update {node}'s neighbors' distances. Node {neighbor}:<br>The distance to {neighbor} from {node} is longer or equal than the one previously discovered. Do not update the distance.",
"#help": "Ohje",
"#about": "Lisätietoa",
"#enqueue": "Lisää",
"#update": "Päivitä",
"#dequeue": "Poista",
"priority_queue": "Prioriteettijono",
"node": "Solmu",
"distance": "Etäisyys",
"parent": "Vanhempi",
"edge": "Särmä"
}
},
"params": {
"JXOP-feedback": "continuous",
"JXOP-fixmode": "fix"
}
}
96 changes: 96 additions & 0 deletions testbench/OpenDSA/AV/Development/PrimAVPE-scaffolded.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
#container {
width: 900px;
height: 920px;
}

.jsavline {
height: 45px;
margin: 0 0 0 20px;
}

#procontrols {
text-align: center;
}

.jsavgraph {
margin-top: 0;
margin-bottom: 0;
}

.jsavgraph svg {
z-index: 0;
}

.jsavnode.marked {
background-color: #FFF050;
}
.jsavgraph .jsavedge {
stroke-width: 10;
stroke: #d1c39d;
}
.jsavgraph .jsavedge.marked {
stroke-width: 16;
stroke: #ffe000;;
}
.jsavgraph .jsavedge.queued {
stroke-width: 10;
stroke: #d59f0d;
}
.jsavgraph .jsavedge.highlighted {
stroke: #89e681;
stroke-width: 10;
}
.jsavgraph .jsavnode.highlighted {
background-color: #89e681;
}

.jsavindex.highlighted {
background-color: #89e681;
}

.jsavtree .jsavnode.highlighted {
background-color: #89e681;
}
.jsavgraph .jsavedgelabel {
font-size: 16px;
background-color: transparent;
text-shadow: 0 0 5px #fff;
}
.jsavautoresize .jsavnode {
min-width: 45px;
min-height: 45px;
}

.jsavtree {
min-width: 400px;
min-height: 250px;
margin: 0px;
}

.bintree {
min-width: 400px;
min-height: 250px;
max-width: 400px;
max-height: 250px;
margin: auto;
background-color: #ffffff;
border: 1px #000000 solid;
}

.prioqueue {
text-align: center;
margin: 0px;
}

.jsavtree svg {
margin: 10px;
}

.jsavtreenode {
margin: 10px;
}

.avcontainer .jsavhorizontalarray > li:first-child {
max-width: none !important;
min-width: 70px !important;
}
Loading