stemwayLearningStyleTest/testUserInterface.html at main · Boggis911/stemwayLearningStyleTest · 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
<script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuidv4.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">


<div class = "test-container">

    <div class="container" id="introContainer" style="display: block">
        <p>Welcome to the quick 3 min learning strategies test!</p>
        <p>We will ask you a few general questions about your studying habits. The test results will show your learning effectiveness</p>
        <p id="intoContainerErrorParagraph"></p>
        <button id="beginButton">Begin</button>
    </div>


    <div class="container" id="questionContainer" style="display: none">
        <p id="questionNumber"></p>
        <p id="question"></p>
        <div id="answerOptions"></div> <!-- New Div for answer options -->
        <button id="backButton">Back</button>
        <button id="nextButton">Next</button>
        <button id="submitButton" style="display: none;">Submit Answers</button>
    </div>


    <div class="container" id="resultsContainer" style="display: none;">
        <div class="loader" id="loader" style="display: none;"></div>
        <p id="results"></p>
        <p id="resultsComment" style="display: none;"></p>
        <p id="callToActionText" style="display: none;"></p>
        <button id="resultsExitButton">Exit</button>
        <button id="callToActionButton">Claim my free lesson and full results</button>
    </div>


    <div class="container" id="emailContainer" style="display: none;">
        <p>Enter your details to receive full results and instruction on how to use your free lesson:</p>
        <label for="userName">Name:</label><br>
        <input type="text" id="userName" placeholder="Enter your name"><br><br>
        <label for="userEmail">Email:</label><br>
        <input type="email" id="userEmail" placeholder="Enter your email address"><br><br>

        <div style="display: flex; justify-content: space-between; align-items: center;">
            <input type="checkbox" id="privacyConsent" style="flex: 0;">
            <label for="privacyConsent" style="flex: 1; text-align: center;">I agree to the <a href="../privacy-policy/" target="_blank">Privacy Policy</a></label>
        </div>

        <button id="submitEmail">Submit</button>
    </div>


    <div class="container" id="exitContainer" style="display: none;">
        <p id="exitContainerText"></p>
        <button id="exitButton">Finish</button>
    </div>

</div>