our-journey/src/partials/editor-bar.html

Our Journey interactive student journey creator. | © 2018 The Open University (IET-OU).

<div class="editorbar" id="editorbar">
  <div class="formeditor" id="formeditor">

    <h1 id="title">Journey editor: Map your study journey on to the cards</h1>

    <form id="updateform">
      <select id="icon_select" aria-labelledby="What happened?">
        <option value="considerstudy">Considering study</option>
        <option value="information">Finding information</option>
        <option value="register">Registering</option>
        <option value="finances">Finances</option>
        <option value="peersupport">Peer support</option>
        <option value="none">What happened?</option>
        <option value="achievement">Achievement</option>
        <option value="admin">Admin and forms</option>
        <option value="assessment">Assessment</option>
        <option value="studybreak">Break from study</option>
        <option value="barrier">Barrier</option>
        <option value="communication">Communication</option>
        <option value="confidence">Confidence boost</option>
        <option value="duedates">Due dates</option>
        <option value="employment">Jobs and Employment</option>
        <option value="studygoal">Goal</option>
        <option value="helpneeded">Help needed</option>
        <option value="highpressure">High pressure</option>
        <option value="lostdirection">Lost direction</option>
        <option value="lowenergy">Low energy</option>
        <option value="lowscores">Low scores</option>
        <option value="moving">Moving home</option>
        <option value="studymilestone">Milestone</option>
        <option value="nosupport">No support</option>
        <option value="problem">Problem</option>
        <option value="repetition">Repetition</option>
        <option value="studyexperience">Study experience</option>
        <option value="studysuccess">Study success</option>
        <option value="studysupport">Study support</option>
        <option value="timelost">Time Lost</option>
      </select>

      <label for="event_desc">Describe it:</label>
      <textarea rows=3 maxlength=45 cols=12 id="event_desc" value=""></textarea>

      <select id="emoticon_select" aria-labelledby="How did you feel?">
        <option value="none">How did you feel?</option>
        <option value="angry">Angry</option>
        <option value="anxious">Anxious</option>
        <option value="bored">Bored</option>
        <option value="confident">Confident</option>
        <option value="confused">Confused</option>
        <option value="curious">Curious</option>
        <option value="embarrassed">Embarrassed</option>
        <option value="excited">Excited</option>
        <option value="happy">Happy</option>
        <option value="nervous">Nervous</option>
        <option value="proud">Proud</option>
        <option value="scared">Scared</option>
        <option value="stressed">Bored</option>
        <option value="thinking">Thinking</option>
        <option value="tired">Tired</option>
        <option value="unhappy">Unhappy</option>
        <option value="unwell">Unwell</option>
        <option value="upset">Upset</option>
      </select>

      <label for="post_it_text">Optional note:</label>
      <textarea rows=3 maxlength=44 cols=12 id="post_it_text" value=""></textarea>
      <input type='submit' aria-label="Update element" value="Update" id="updateButton">
    </form>

    <form id="deleteform">
      <input type='submit' aria-label="Delete element" value="Clear" id="deleteButton">
    </form>

    <form id="backform">
      <input type='submit' aria-label="Move element backwards" value="Move Back" id="backButton">
    </form>
    <form id="forwardform">
      <input type='submit' aria-label="Move element forwards" value="Move Fwd" id="fwdButton">
    </form>
    <form id="optionsform">
      <input type='submit' aria-label="Show or hide other menu options" value="Options" id="optionsButton">
    </form>
    <a href="{helpUrl}" target="_blank">Help</a>
  </div>

  <div id="float_bar" class="float_bar">
    <form id="float_simplesaveform">
      <input type='submit' aria-label="Save journey to file" value="Save" id="float_simplesavebutton">
    </form>
    <form id="float_optionsform">
      <input type='submit' aria-label="Show or hide menu options" value="Options" id="float_optionsButton">
    </form>

    <a class="help_link" id="help_link" href="{helpUrl}" target="_blank">Help</a>
  </div>

  <div class="optionsbar" id="options" aria-label="Menu">
    <h2>Options</h2>
    <h2>File:</h2>
    <h3>Save As:</h3>
    <form id="saveform" aria-label="Save journey to file name">
      <label for="filenamearea">Choose a filename:</label>
      <input type='text' value="journey-file" id="filenamearea">
      <input type='submit' value="Save" id="saveButton" >
    </form>

    <br>
    <form id="loadform" aria-label="Load journey from file" hidden>
      <h3 hidden><label for="fileinput">Load:</label></h3>
      <input type='file' accept='application/json, text/html' id='fileinput' required aria-required="true" hidden>
      <input type='submit' id="loadButton" value="Load File" hidden>
    </form>
    <h3>Load:</h3>
    You can load your saved journey by opening the file in a browser. Opening the saved file (for example by double clicking on it) should load it in your default browser.
    
    <br>
    <h3>Print:</h3>
    <form id="printform">
      <input type='submit' aria-label="Print using browser" value="Print using browser" id="printButton">
    </form>
    <hr>
    <h2>View:</h2>

    <form id="backgroundelementsform" aria-label="Show or hide background images">
      <label for="background_elements_select">Show Background Images:</label>
      <select id="background_elements_select">
        <option value="all" selected="selected">All images</option>
        <option value="some">Some images</option>
        <option value="none">No images</option>
      </select>
    </form>

    <br>

    <form id="backgroundform" aria-label="Choose background colour">
      <label for="background_select">Background Colour:</label>
      <select id="background_select">
        <option value="none">None</option>
        <option value="Wheat" selected="selected">Wheat</option>
        <option value="Ivory">Ivory</option>
        <option value="Linen">Linen</option>
        <option value="Beige">Beige</option>
        <option value="BurlyWood">Wood</option>
        <option value="DarkSeaGreen">Green</option>
        <option value="PaleTurquoise">Turquoise</option>
        <option value="SkyBlue">Blue</option>
        <option value="LightPink">Pink</option>
        <option value="Lavender">Lavender</option>
        <option value="LightGray">Grey</option>
        <option value="Coral">Orange</option>
      </select>
    </form>

    <br>

    <form id="cardcolourform" aria-label="Choose card colour">
      <label for="card_colour_select">Card Colour:</label>
      <select id="card_colour_select">
        <option value="none">None</option>
        <option value="White">White</option>
        <option value="Ivory" selected="selected">Ivory</option>
        <option value="Linen">Linen</option>
        <option value="Beige">Beige</option>
        <option value="Wheat">Wheat</option>
        <option value="BurlyWood">Wood</option>
        <option value="DarkSeaGreen">Green</option>
        <option value="PaleTurquoise">Turquoise</option>
        <option value="SkyBlue">Blue</option>
        <option value="LightPink">Pink</option>
        <option value="Lavender">Lavender</option>
        <option value="LightGray">Grey</option>
        <option value="Coral">Orange</option>
      </select>
    </form>

    <br>

    <form id="emoticoncolourform" aria-label="Choose emoticon background colour">
      <label for="emoticon_colour_select">Emoticon Colour:</label>
      <select id="emoticon_colour_select" selected="White">
        <option value="none">None</option>
        <option value="White" selected="selected">White</option>
        <option value="Ivory">Ivory</option>
        <option value="Linen">Linen</option>
        <option value="Beige">Beige</option>
        <option value="Wheat">Wheat</option>
        <option value="BurlyWood">Wood</option>
        <option value="DarkSeaGreen">Green</option>
        <option value="PaleTurquoise">Turquoise</option>
        <option value="SkyBlue">Blue</option>
        <option value="LightPink">Pink</option>
        <option value="Lavender">Lavender</option>
        <option value="LightGray">Grey</option>
        <option value="Coral">Orange</option>
        <option value="Black">Black</option>
      </select>
    </form>

    <br>
    <hr>
    <h2>Share:</h2>
    <p>
      <a id="oj-share-link" class="oj-share-link" href="?empty" rel="nofollow" title="Base64 encoded!">Go to shareable URL</a>
    </p>
  </div>
</div>