termproject/help.html at master · dmr121/termproject · 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
<!DOCTYPE html>
<html lang = 'en' id="help">
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800|Roboto:300,400,700,900"
    rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles/mainpage.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>

    </script>
    <title> Help Page </title>
    <meta charset = 'utf-8' />
  </head>
  <body>
    <div id = "menuBar" class = "container-fluid">
      <div id = "menuSpans" class = "row">
        <div class = "col-lg-7"></div>
        <div class ="col-lg-1" id="buttonHolder">
          <a href="prj.html"><div id = "menuButton">Home</div></a>
        </div>
        <div id = "menuButton" class = "col-lg-1" style="cursor:default;"><span>Lessons</span>
          <div id = "dropdown">
            <a href="lessons/variables.php"><div>Variables</div></a>
            <a href="lessons/arrays.php"><div>Arrays</div></a>
            <a href="lessons/conditionals.php"><div>If/Else</div></a>
            <a href="lessons/switches.php"><div>Switches</div></a>
            <a href="lessons/forloops.php"><div>For Loops</div></a>
            <a href="lessons/whileloops.php"><div>While Loops</div></a>
            <a href="lessons/final.html"><div>Final Challenge</div></a>
          </div>
        </div>
        <div class ="col-lg-1" id="buttonHolder">
          <a href="statistics.php"><div id = "menuButton">Statistics</div></a>
        </div>
        <div class ="col-lg-1" id="buttonHolder">
          <a href="technical.html"><div id = "menuButton">Technical</div></a>
        </div>
        <div class ="col-lg-1" id="buttonHolder">
          <a href="help.html"><div id = "menuButton">Help</div></a>
        </div>
      </div>
    </div>
    <div id = "mainPage" class = "container">
      <div class = "container">
        <h1 id = "title"> Help Page </h1>
        <h2 id = "subtitle"> Question? Find the Answer </h2>
      </div>
      <hr id = "line"></hr>
      </br> </br>
      <div id = "paragraphs" class = "container">
        <p><h2>How to use the website</h2></p>
        <p>To begin navigation, notice the menu bar the top right corner of the website:</p>
        <p><img src="images/help1.png" id="help1"/> </p>
        <p>A new user should click the home button first and read the explanation of the website and its purpose. Then they should move onto lessons and when they hover the mouse over the lessons button it has dropdown options that the user can select that look like this:</p>
        <p><img src="images/help2.png" id="help2"/> </p>
        <p>It is suggested to go through the lessons in order and there is a button located at the bottom of each lesson page which will automatically take the user to the next lesson when clicked. The button looks like this:</p>
        <p><img src="images/help3.png" id="help3"/> </p>
        <p>After the user finishes a lesson there is a section of multiple choice questions which test the user on the information they have just learned. The multiple choice section looks like this:</p>
        <p><img src="images/help4.png" id="help4"/> </p>
        <p>There are two different ways to access the final challenge. One way is to click the final challenge button at the bottom of the while loops lesson.  This is what the button looks like:</p>
        <p><img src="images/help5.png" id="help5"/> </p>
        <p>The other option is for the user to access the dropdown menu at the top right of the page and go down to the bottom option which is labeled final challenge.  The menu looks like this when the options drop down:</p>
        <p><img src="images/help6.png" id="help6"/> </p>
        <p>If the user clicks the statistics menu button they will be taken to a page that gives them the statistics of all the questions they have answered so far. The ratio of questions answered correctly in each section will be displayed.  The statistics button looks like this:</p>
        <p><img src="images/help7.png" id="help7"/> </p>
        <p>If the user clicks the technical menu button they will be taken to a page that has instructions on how the website was set up and information describing some things that are going on behind the scenes that the user might not normally get to see.  We believe this helps the learning experience for the user.  The technical button looks like this:</p>
        <p><img src="images/help8.png" id="help8"/> </p>
        <p>If the user clicks on the help menu button they will be taken to this page. The help button looks like this:</p>
        <p><img src="images/help9.png" id="help9"/> </p>
      </div>
    </div>
  </body>
</html>