eb-exercise-creator/index.html at master · vellebelle/eb-exercise-creator · 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
90
91
92
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
  <title>Eb level create clone with UI</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">


      <link rel="stylesheet" href="css/style.css">


</head>

<body>

  <div id="app">

    <div id="top-navigation-bar">
      <div class="back-arrow"><i class="icon-left-big"></i></div>

      <h1 class="navigation-title"></h1>
<!-- <button onClick="render.showView('exercise-selector');">Back</button> -->
    </div>

    <div id="exercise-selector" class="view">
      <ul class="discipline-selector">
        <li class="select-discipline-btn" id="compare-interval-sizes-btn">Compare Interval Sizes</li>
        <li class="select-discipline-btn" id="identify-intervals-btn">Identify Intervals</li>
        <li class="select-discipline-btn" id="identify-chords-btn">Identify Chords</li>
        <li class="select-discipline-btn" id="identify-chord-inversions-btn">Identify Chord Inversions</li>
        <li class="select-discipline-btn" id="identify-scales-btn">Identify Scales</li>
      </ul>

      <div id="item-renderer">
        <div class="create-new-exercise">Create new exercise <span class="plus-sign">+</span></div>
        <div id="no-exercises-in-discipline-text"></div>
        <div id="exercises">
          <ul id="exercise-list">

          </ul>
        </div>
      </div>
      <div id="exercise-info">
        <h2 class="exercise-info-title"></h2>
        <p class="exercise-info-description"></p>
      </div>
  </div>  <!-- end exercise-selector -->


  <div id="exercise-creator" class="view">


    <ul id="sound-sequence-list">

    </ul> <!-- end sound-sequence-list -->
    <div id="exercise-data-input">
       <h2>Select harmony</h2>
      <div id="harmony-select"</div>

        <input type="radio" name="harmony" id="harmony-ascending" value="Ascending" checked>
        <label for="harmony-ascending">Ascending</label>

        <input type="radio" name="harmony" id="harmony-descending" value="Descending">
        <label for="harmony-descending">Descending</label>

        <input type="radio" name="harmony" id="harmony-harmonic" value="Harmonic">
        <label for="harmony-harmonic">Harmonic</label>

        <input type="radio" name="harmony" id="harmony-random" value="Random">
        <label for="harmony-random">Random</label>
      </div>
    <label for="exercise-title-input">Title</label>
    <input type="text" id="exercise-title-input">
    <label for="exercise-description-input">Description</label>
    <textarea id="exercise-description-input"></textarea>
    <label id="sound-sequences-in-exercise-label" for="sound-sequences-in-exercise">Chords in this exercise:</label>
    <div id="sound-sequences-in-exercise"></div>
    <button id="save-exercise">Save</button>
    <div id="validation"></div>
    </div> <!-- end exercise-data-input -->

  </div> <!-- end exercise-creator -->

</div> <!-- end app -->
  <script src='js/jquery-3.2.1.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>