EDIH_Chatbot_Website/index.html at main · SarahHamer/EDIH_Chatbot_Website · 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
76
77
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>EDIH Chatbot Usability Test</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f9f9fb;
      color: #333;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: #0b5d97;
      color: white;
      padding: 2rem 1rem;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    main {
      max-width: 800px;
      margin: 2rem auto;
      padding: 1rem;
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .chatbot-instruction {
      background-color: #d4e8f7;
      border-left: 6px solid #0c70b7;
      padding: 1rem;
      margin: 1.5rem 0;
      font-size: 1.1rem;
      border-radius: 8px;
    }

    p {
      font-size: 1.1rem;
      text-align: center;
    }

    footer {
      text-align: center;
      padding: 1rem;
      font-size: 0.9rem;
      color: #666;
    }
  </style>
</head>
<body>

  <header>
    <h1>Welcome to the EDIH Chatbot Usability Test!</h1>
  </header>

  <main>
    <div class="chatbot-instruction">
      Click the blue chatbot icon in the bottom-right corner to begin the test. The chatbot will open in a window.
    </div>

    <p>Scenario: In this test, you are looking for EDIHs to collaborate with. Please interact with the chatbot and think aloud. After you feel like you have explored enough, please stay around to answer a few follow-up questions and share your feedback!</p>
  </main>

  <footer>
    &copy; 2025 Sarah Hamer Master Thesis. This chatbot is based on by the what2study project. For more information, please go to https://what2study.de/.
  </footer>

  <!-- Chatbot script with floating button -->
  <script id="initLoader" src="https://cpstech.de/what2StudyLoader/?bot_id=KDM78sMl86&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjaGF0Ym90SWQiOiJLRE03OHNNbDg2IiwicHVycG9zZSI6ImNoYXRib3RJbnRlZ3JhdGlvbiIsImlhdCI6MTc0OTQ3NTUyNn0.cZeC2Y9dSFv31mL1LaBiETTXgnc3mwwgR-GbeJBL5N4&windowtype=min"></script>

</body>
</html>