StarTracker - 1-4<title> <meta http-equiv="X-Clacks-Overhead" content="GNU Terry Pratchett"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class='container-fluid'> <div class='row'> <div class='col-md-4'></div> <div class='col-md-4 col-xs-12 center-block'><img src='../resources/web_logo.png'/></div> <div class='col-md-4'></div> </div> <div class='row'> <div class='col-md-4 col-xs-1'></div> <div class='col-md-4 col-xs-10'> <div class='name-entry text-center collapse'><br> <b>STAGES 1-4 (Lower Slopes)</b><br> <i>NB: recently redesigned for GDPR-compliance</i><br><br> Your FULL Name, please: <input type='text' name='name' id='name'><br><br> Extra details (<b>if needed*</b>): <input type='text' name='email' id='email'><br> <i>(* additional information StarTouch may have asked you to give, to help identify you. For instance: Course Date or Company Name)</i><br><br> <a href='#' class='btn btn-primary submitDetails'>Continue</a><br><br> <p><b>* Feedback:</b> You will have the chance to <i><b>SUBMIT</b></i> any results online to StarTouch. If we have an email address for your name, we can respond personally with analysis & comment.</p> <p><b>Privacy:</b> We will not share your details with others or send you marketing information (unless requested separately).</p> </div> </div> <div class='col-md-4 col-xs-1'></div> </div> <div class='row'> <div class='col-md-4 col-xs-1'></div> <div class='col-md-4 col-xs-10'> <ul class='stage-select text-center'> <div class='stages collapse'> <li> <input type='radio' name='stage' class='stage hidden' id='stage4'> <label for='stage4' class='btn btn-primary'>4: Sittage</label> </li> <li> <input type='radio' name='stage' class='stage hidden' id='stage3'> <label for='stage3' class='btn btn-primary'>3: Spider Tap</label> </li> <li> <input type='radio' name='stage' class='stage hidden' id='stage2'> <label for='stage2' class='btn btn-primary'>2: Spell Act</label> </li> <li> <input type='radio' name='stage' class='stage hidden' id='stage1'> <label for='stage1' class='btn btn-primary'>1: Story</label> </li> </div> <div class='stage-confirm collapse'> <li> <a class='btn btn-primary' href='#'>Confirm</a> </li> </div> </ul> </div> <div class='col-md-4 col-xs-1'></div> </div> <div class='row'> <div class='col-md-4'></div> <div class='col-md-4 text-center'> <div class='mainContainer collapse'> <p class='collapse' id='prompt'></p> <div class='promptsControlContainer collapse'> <form> <input type='checkbox' name='doPrompt' id='doPrompt' class='hidden'><label for='doPrompt' class='btn btn-primary'>I would like a prompt.</label><br> <div class='promptsControl collapse'> <input type='radio' name='radPromptStyle' class='radPromptStyle hidden' id='randChars' value='randChars'><label for='randChars' class='btn btn-primary'>Random Characters</label> <input type='radio' name='radPromptStyle' class='radPromptStyle hidden' id='randStrings' value='randStrings'><label for='randStrings' class='btn btn-primary'>Common Letter Groups</label><br> <p>How many characters?</p> <input type='radio' name='radPromptLength' class='radPromptLength hidden' id='oneChar' value='oneChar'><label for='oneChar' class='btn btn-primary'>1</label> <input type='radio' name='radPromptLength' class='radPromptLength hidden' id='twoChar' value='twoChar'><label for='twoChar' class='btn btn-primary'>2</label> <input type='radio' name='radPromptLength' class='radPromptLength hidden' id='threeChar' value='threeChar'><label for='threeChar' class='btn btn-primary'>3</label> <input type='radio' name='radPromptLength' class='radPromptLength hidden' id='fourChar' value='fourChar'><label for='fourChar' class='btn btn-primary'>4</label> <input type='radio' name='radPromptLength' class='radPromptLength hidden' id='fiveChar' value='fiveChar'><label for='fiveChar' class='btn btn-primary'>5</label><br> <a href='#' class='btn btn-primary btnGetPrompt'>Save Prompt Settings</a> </div> </form> </div> <div class='promptActiveBox collapse'> <a href='#' class='btn btn-primary btnPromptSettings'>Prompt Settings</a> </div> <p class='collapse' id='clarify'></p> <div class='timerButtonGroup collapse' id='startInstruct'> <p id='instruct'>Press Spacebar to start.</p> <a class='btn btn-primary timerButton' href='#'>Spacebar</a> </div> </div> </div> <div class='col-md-4'></div> </div> <div class='row'> <div class='col-md-4'></div> <div class='col-md-4 text-center'> <form class='resultsForm collapse'> Accuracy: <input type='radio' class='acc hidden' name='acc' id='not100acc'><label for='not100acc' class='btn btn-primary'>Not 100% (yet)</label> <input type='radio' class='acc hidden' name='acc' id='100acc' checked='true'><label for='100acc' class='btn btn-primary'>100%</label><br> Slickness:  <input type='radio' class='slick hidden' name='slick' id='slick5'><label for='slick5' class='btn btn-primary'>1-5</label> <input type='radio' class='slick hidden' name='slick' id='slick6'><label for='slick6' class='btn btn-primary'>6</label> <input type='radio' class='slick hidden' name='slick' id='slick7'><label for='slick7' class='btn btn-primary'>7</label> <input type='radio' class='slick hidden' name='slick' id='slick8'><label for='slick8' class='btn btn-primary'>8</label> <input type='radio' class='slick hidden' name='slick' id='slick9'><label for='slick9' class='btn btn-primary'>9+</label><br> <div id='stage23length' class='hidden'> Characters: <input type='radio' name='radChar' class='radChar hidden' id='charStory'><label for='charStory' class='btn btn-primary'>34 (Full Story)</label> <input type='radio' name='radChar' class='radChar hidden' id='char1'><label for='char1' class='btn btn-primary'>1</label> <input type='radio' name='radChar' class='radChar hidden' id='char2'><label for='char2' class='btn btn-primary'>2</label> <input type='radio' name='radChar' class='radChar hidden' id='char3'><label for='char3' class='btn btn-primary'>3</label> <input type='radio' name='radChar' class='radChar hidden' id='char4'><label for='char4' class='btn btn-primary'>4</label> <input type='radio' name='radChar' class='radChar hidden' id='char5'><label for='char5' class='btn btn-primary'>5</label> </div> <a class='btn btn-secondary discardButton' href='#'>Discard Scores</a> <a href='#' class='btn btn-primary confirmButton'>Log Scores</a> </form> </div> <div class='col-md-4'></div> </div> <div class='row'> <div class='col-md-4'></div> <div class='col-md-4 text-center'> <div class='showResultsContainer collapse'> <a href='#' class='btn btn-secondary showResults'>Show Results</a> </div> </div> </div> <div class='row'> <div class='col-md-4'></div> <div class='col-md-4'> <form id='downloadForm' action='download.php' class='text-center collapse' method='post'> <input id='userName' name='usrName' type='hidden' value='N/A'> <input id='userEmail' name='usrEmail' type='hidden' value = 'N/A'> <input id='resultHolder' name='results' type='hidden'> <input id='sessionTimeStamp' name='sessionTime' type='hidden'> <a class='btn btn-secondary resetButton' href='#'>Clear Results</a><br> <p>Press the "<b>Submit (+ save)</b>" button to send your results to StarTouch with the name & identifying information you provided. If we already have your email address (or if you contact us separately at <a href="mailto:info@startouch.co.uk?Subject=Typing%20Test%20Results">info@startouch.co.uk</a>) we can respond with analysis, comment & advice on your results. <u>Note</u>: a local download of your results to your device will be started which you can complete/cancel as you wish.</p> <input type='submit' name='buttonClicked' class='btn btn-primary csvSubmitButton' value='Submit (+ save)'> </form> </div> <div class='col-md-4'></div> </div> <div class='row'> <div class='col-md-4'></div> <div class='col-md-4'> <ul class='resultsList collapse'> </ul> <li class='template' id='resultsTemplate'> <span class='timestamp'>TIMESTAMP</span> <table> <tr> <td class='indent1'>Stage:</td> <td class='indent2'><span class='stage'>STAGE</span></td> </tr> <tr> <td class='indent1'>Accuracy:</td> <td class='indent2'><span class='accuracy'>ACCURACY</span></td> </tr> <tr> <td class='indent1'>Slickness:</td> <td class='indent2'><span class='slickness'>NOT SELECTED</span></td> </tr> <tr class='charRow hidden'> <td class='indent1'>Characters:</td> <td class='indent2'><span class='characters'>CHARACTERS</span></td> </tr> <tr> <td class='indent1'>Time taken:</td> <td class='indent2'><span class='duration'>DURATION</span></td> </tr> </table> </li> </div> <div class='col-md-4'></div> </div> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script> <script src='http://code.jquery.com/color/jquery.color-2.1.2.min.js'></script> <script src='https://code.jquery.com/ui/1.11.3/jquery-ui.min.js'></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src='startouch2.js'></script> </body> </html>