learningStrategyTest/testUserInterface.html at main · Boggis911/learningStrategyTest · 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

    <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="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" style="opacity: 0; transition: opacity 0.5s;">Begin</button>
    </div>


    <div class="container" id="questionContainer" style="display: none">
        <p id="questionNumber"></p>
        <p id="question"></p>
        <input type="text" id="answer">
        <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>
        <div id="progressBarContainer" class="progress-bar">
            <div id="progressBar"></div>
        </div>
        <p id="percentage">0%</p>
        <p id="scoreComment" style="display: none;"></p>
        <p id="callToActionText" style="display: none;"></p>
        <button id="resultsExitButton" style="display: none;">Exit</button>
        <button id="callToActionButton" style="display: none;">Yes, send me full results</button>
    </div>


<div class="container" id="emailContainer" style="display: none;">
    <p>Enter your details to receive full results via email:</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="https://www.neonlearner.com/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>