jsav-exercise-player/player.html at master · Meratyn/jsav-exercise-player · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Exercise Player</title>
  <link rel="stylesheet" href="./styles/JSAV.css" type="text/css" />
  <link rel="stylesheet" href="./styles/exercise-player.css" type="text/css" />
  <script src="./lib/jquery.min.js"></script>
  <script src="./lib/jquery-ui.min.js"></script>
  <script src="./lib/jquery.transit.js"></script>
  <script src="./lib/raphael.js"></script>
  <script src="./lib/JSAV-min.js"></script>
</head>
<body>
	<header>
		<h1>Exercise Player</h1>
	</header>

  <div class="joint-controls">
		<p>Displays a student's solution along with a model solution for a visual algorithm simulation exercise from a JAAL 1.0 file.</p>
			<div class="speed-control">
				<label id="speed-label">Animation Speed:</label>
				<input
					type="range" id="speed" name="speed"
					value="-1000" step="200"
					min="-2000" max="-200"
					aria-labelledby="speed-label"
				>
			</div>
    </div>
  </div>

	<div aria-live="assertive" class="no-data">
		<strong></strong>
	</div>

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

	<button type="button" value="detailed" id="view-mode-button">Switch to detailed view</button>

  <div class="views-container">

    <div class="animation-view">
			<div class="heading-container">
				<h2>Submission</h2><span class="score"></span>
			</div>
      <div class="view-control">
        <div class="auto-animation">
          <button id="play-pause-button">Play</button>
          <button id="stop-button">Stop</button>
        </div>
        <div class="slide-show">
          <button id="to-beginning">Begin</button>
          <button id="step-backward">Back</button>
          <button id="step-forward">Forward</button>
          <button id="to-end">End</button>
        </div>
      </div>
      <div id="animation-container"></div>
    </div>

    <div class="model-answer-view">
			<div class="heading-container">
				<h2>Model answer</h2>
			</div>
      <div class="view-control">
        <div class="auto-animation">
          <button id="model-answer-play-pause-button">Play</button>
          <button id="model-answer-stop-button">Stop</button>
        </div>
        <div class="slide-show">
          <button id="model-answer-to-beginning">Begin</button>
          <button id="model-answer-step-backward">Back</button>
          <button id="model-answer-step-forward">Forward</button>
          <button id="model-answer-to-end">End</button>
        </div>
      </div>
      <div id="model-answer-container" class="jsavcanvas"></div>
    </div>

  </div>

</body>
<script src="./build/player-bundle.js"></script>
</html>