Repository navigation
Expand file tree
/
Copy pathfeedback.html
More file actions
185 lines (185 loc) · 19.6 KB
/
Copy pathfeedback.html
File metadata and controls
185 lines (185 loc) · 19.6 KB
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Share Feedback - AgenticEd</title>
<meta name="description" content="Share feedback about AgenticEd lessons, activities, resources, and the learning experience.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{--cream:#FAF9FF;--brown:#121526;--purple:#7C3AED;--purple-dark:#6824D9;--purple-light:#F1E9FF;--accent:#A855F7;--muted:#646579;--border:#E4E1F0;--white:#fff;--success:#237A57;--danger:#B42318}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,sans-serif;background:var(--cream);color:var(--brown);line-height:1.65;-webkit-font-smoothing:antialiased}
.topbar{background:var(--brown);padding:10px 32px;display:flex;justify-content:space-between;align-items:center}
.logo{font:900 16px Outfit,sans-serif;color:var(--cream);text-decoration:none}.logo em{font-style:normal;color:var(--purple)}
.back{color:rgba(250,249,255,.65);font-size:13px;text-decoration:none}.back:hover{color:var(--cream)}
.hero{background:var(--brown);border-bottom:3px solid var(--purple);padding:48px 32px 54px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-100px;top:-210px;background:rgba(168,85,247,.18)}
.hero__inner{max-width:860px;margin:auto;position:relative;z-index:1}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
h1{font:900 clamp(32px,5vw,48px)/1.08 Outfit,sans-serif;color:var(--cream);margin-bottom:14px}.hero__copy{font-size:16px;color:rgba(250,249,255,.72);max-width:650px}
main{max-width:860px;margin:auto;padding:42px 32px 80px}
.tips{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}.tip{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:18px 20px}.tip strong{font:800 15px Outfit,sans-serif;display:block;margin-bottom:4px}.tip p{font-size:13px;color:var(--muted)}
form{background:var(--white);border:1px solid var(--border);border-radius:18px;padding:32px;box-shadow:0 14px 34px rgba(18,21,38,.06)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.field{margin-bottom:22px}.full{grid-column:1/-1}
.section-title{grid-column:1/-1;border-top:1px solid var(--border);padding-top:24px;margin:6px 0 20px}.section-title:first-child{border-top:0;padding-top:0}.section-title h2{font:800 21px Outfit,sans-serif;margin-bottom:4px}.section-title p{font-size:13px;color:var(--muted)}
label,.field-label{display:block;font-size:12px;font-weight:800;letter-spacing:.045em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.optional{font-weight:500;text-transform:none;letter-spacing:0;color:#858697}
input,select,textarea{width:100%;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--brown);font:15px Inter,sans-serif;padding:12px 14px;transition:border-color .18s,box-shadow .18s}
textarea{min-height:130px;resize:vertical;line-height:1.55}input:focus,select:focus,textarea:focus{outline:0;border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,.13)}
.field-note{font-size:11px;color:#858697;margin-top:6px}.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}.check{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:9px;padding:11px 12px;font-size:13px;color:var(--brown)}.check input{width:auto;margin-top:3px;accent-color:var(--purple)}.check label{font:500 13px Inter,sans-serif;text-transform:none;letter-spacing:0;color:var(--brown);margin:0}.consent{display:flex;gap:10px;align-items:flex-start}.consent input{width:auto;margin-top:4px;accent-color:var(--purple)}.consent label{font:500 13px/1.55 Inter,sans-serif;text-transform:none;letter-spacing:0;color:var(--muted);margin:0}
fieldset{border:0}.rating{display:flex;gap:8px;flex-wrap:wrap}.rating input{position:absolute;opacity:0;pointer-events:none}.rating label{width:48px;height:46px;border:1px solid var(--border);border-radius:9px;display:grid;place-items:center;margin:0;color:var(--muted);font:800 16px Outfit,sans-serif;cursor:pointer;transition:.15s}.rating input:checked+label{background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 5px 14px rgba(124,58,237,.22)}.rating input:focus-visible+label{outline:3px solid rgba(124,58,237,.25);outline-offset:2px}.rating-key{display:flex;justify-content:space-between;max-width:272px;font-size:11px;color:#858697;margin-top:6px}
.counter{text-align:right;font-size:11px;color:#858697;margin-top:5px}.privacy-note{background:var(--purple-light);border-radius:10px;padding:14px 16px;font-size:13px;color:var(--muted);margin-bottom:22px}.privacy-note a{color:var(--purple);font-weight:700}
.actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}button{border:0;border-radius:9px;background:linear-gradient(135deg,var(--purple),#9333EA);color:#fff;padding:13px 24px;font:800 15px Inter,sans-serif;cursor:pointer;box-shadow:0 7px 18px rgba(124,58,237,.2)}button:hover{background:var(--purple-dark)}button:disabled{opacity:.65;cursor:wait}.status{font-size:14px;font-weight:700;min-height:22px}.success{color:var(--success)}.error{color:var(--danger)}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
footer{background:var(--brown);padding:24px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}footer a{color:rgba(250,249,255,.55);font-size:13px;text-decoration:none}footer a:hover{color:var(--cream)}.footer-links{display:flex;gap:20px;flex-wrap:wrap}
@media(max-width:700px){.topbar{padding:10px 20px}.hero{padding:36px 20px 40px}main{padding:28px 18px 60px}.tips,.grid,.checks{grid-template-columns:1fr}form{padding:22px 18px}.full,.section-title{grid-column:auto}}
</style>
<script src="metrics-config.js"></script>
<script src="analytics.js"></script>
<link rel="icon" type="image/png" href="images/favicon.png"/>
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"/>
<style>.brand-mark{display:inline-block;height:1.6em;width:auto;vertical-align:middle;margin:-.2em .45em 0 0;}</style>
</head>
<body>
<div class="topbar">
<a href="index.html" class="logo"><img class="brand-mark" src="images/agenticed-mark.png" alt="" aria-hidden="true"/>Agentic<em>Ed</em></a>
<a href="index.html" class="back">← Back to AgenticEd</a>
</div>
<header class="hero">
<div class="hero__inner">
<p class="eyebrow">Help shape AgenticEd</p>
<h1>Tell us what would make learning better.</h1>
<p class="hero__copy">Your experience helps us measure real-world reach and improve the lessons, activities, accessibility, and teacher resources. This usually takes three to five minutes.</p>
</div>
</header>
<main>
<div class="tips" aria-hidden="true">
<div class="tip"><strong>Specific is useful</strong><p>Tell us which lesson or resource you used and what happened.</p></div>
<div class="tip"><strong>Honest is welcome</strong><p>Share what worked, what was confusing, or what you want next.</p></div>
</div>
<form id="feedback-form">
<div class="grid">
<div class="section-title"><h2>About your experience</h2><p>These details help us understand who AgenticEd reaches and how it is being used.</p></div>
<div class="field">
<label for="role">I am a</label>
<select id="role" name="role" required><option value="">Choose one</option><option value="learner">Learner</option><option value="teacher">Teacher or facilitator</option><option value="parent">Parent or caregiver</option><option value="educator">Education professional</option><option value="other">Other visitor</option></select>
</div>
<div class="field">
<label for="feedback-type">Feedback about</label>
<select id="feedback-type" name="feedback_type" required><option value="">Choose one</option><option value="content">Lesson content</option><option value="activity">Activity or quiz</option><option value="website">Website experience</option><option value="accessibility">Accessibility</option><option value="teacher_resources">Teacher resources</option><option value="idea">Suggestion or new idea</option><option value="issue">Problem or incorrect information</option><option value="other">Other</option></select>
</div>
<div class="field">
<label for="organization">School or organization <span class="optional">(optional)</span></label>
<input id="organization" name="organization" maxlength="200" autocomplete="organization" placeholder="School, company, nonprofit, or community">
</div>
<div class="field">
<label for="country">Country or region</label>
<input id="country" name="country" maxlength="100" required placeholder="Example: United States">
</div>
<div class="section-title"><h2>Use and adoption</h2><p>Tell us how you used the curriculum. Please report only your direct, first-hand experience.</p></div>
<div class="field">
<label for="usage-context">How did you use AgenticEd?</label>
<select id="usage-context" name="usage_context" required><option value="">Choose one</option><option value="self_learning">Independent learning</option><option value="classroom">Classroom or course</option><option value="workshop">Workshop or bootcamp</option><option value="workplace">Workplace learning</option><option value="community">Community or nonprofit program</option><option value="evaluation">Curriculum evaluation</option><option value="other">Other</option></select>
</div>
<div class="field">
<label for="course-level">Learning level</label>
<select id="course-level" name="course_level" required><option value="">Choose a level</option><option value="level_1">Level 1 - AI & Agent Foundations</option><option value="level_2">Level 2 - AI Application & Agent Builder</option><option value="level_3">Level 3 - Production Agentic Systems</option><option value="overall">Overall site or shared resource</option></select>
</div>
<div class="field full">
<label for="area">Week or course area</label>
<select id="area" name="area" required disabled><option value="">Choose a level first</option></select>
<p class="field-note">Levels 2 and 3 are planned paths. Select the planned week you reviewed or are commenting on.</p>
</div>
<div class="field">
<label for="completion-status">How much did you complete?</label>
<select id="completion-status" name="completion_status" required><option value="">Choose one</option><option value="started">Started, less than one week</option><option value="partial">Completed 1-3 weeks</option><option value="most">Completed 4-5 weeks</option><option value="completed">Completed all 6 weeks</option><option value="selected_resources">Used selected resources only</option></select>
</div>
<div class="field">
<label for="learners-reached">Learners directly reached</label>
<input type="number" id="learners-reached" name="learners_reached" min="0" max="1000000" step="1" required value="0">
<p class="field-note">Enter 0 for independent learning. Otherwise count learners you personally taught or facilitated; avoid double-counting shared cohorts.</p>
</div>
<div class="section-title"><h2>Learning outcomes</h2><p>Use your honest assessment. These are self-reported outcomes, not test scores.</p></div>
<div class="field">
<label for="confidence-before">Confidence before AgenticEd</label>
<select id="confidence-before" name="confidence_before" required><option value="">Choose 1-5</option><option value="1">1 - Not confident</option><option value="2">2</option><option value="3">3 - Moderately confident</option><option value="4">4</option><option value="5">5 - Very confident</option></select>
</div>
<div class="field">
<label for="confidence-after">Confidence now</label>
<select id="confidence-after" name="confidence_after" required><option value="">Choose 1-5</option><option value="1">1 - Not confident</option><option value="2">2</option><option value="3">3 - Moderately confident</option><option value="4">4</option><option value="5">5 - Very confident</option></select>
</div>
<div class="field">
<label for="project-status">Did AgenticEd help you build something?</label>
<select id="project-status" name="project_status" required><option value="">Choose one</option><option value="built">Yes, completed a project or agent</option><option value="in_progress">A project is in progress</option><option value="planned">I have a project planned</option><option value="not_yet">Not yet</option><option value="not_applicable">Not applicable</option></select>
</div>
<div class="field">
<label for="recommend-score">Likelihood to recommend</label>
<select id="recommend-score" name="recommend_score" required><option value="">Choose 0-10</option><option value="0">0 - Not at all likely</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10 - Extremely likely</option></select>
</div>
<fieldset class="field full" id="outcomes-field">
<legend class="field-label">What changed after using AgenticEd? <span class="optional">(select all that apply)</span></legend>
<div class="checks">
<div class="check"><input type="checkbox" id="outcome-concepts" name="outcomes" value="understood_concepts"><label for="outcome-concepts">Better understood agentic AI concepts</label></div>
<div class="check"><input type="checkbox" id="outcome-built" name="outcomes" value="built_agent"><label for="outcome-built">Built or designed an AI agent</label></div>
<div class="check"><input type="checkbox" id="outcome-safety" name="outcomes" value="responsible_ai"><label for="outcome-safety">Applied responsible-AI practices</label></div>
<div class="check"><input type="checkbox" id="outcome-teaching" name="outcomes" value="taught_others"><label for="outcome-teaching">Taught or supported other learners</label></div>
<div class="check"><input type="checkbox" id="outcome-applied" name="outcomes" value="applied_work_school"><label for="outcome-applied">Applied learning at work or school</label></div>
<div class="check"><input type="checkbox" id="outcome-none" name="outcomes" value="none_yet"><label for="outcome-none">No measurable change yet</label></div>
</div>
<p class="field-note" id="outcomes-error"></p>
</fieldset>
<fieldset class="field">
<legend class="field-label">Overall experience</legend>
<div class="rating" aria-label="Overall experience rating">
<input type="radio" id="rating-1" name="rating" value="1" required><label for="rating-1" aria-label="1 out of 5">1</label>
<input type="radio" id="rating-2" name="rating" value="2"><label for="rating-2" aria-label="2 out of 5">2</label>
<input type="radio" id="rating-3" name="rating" value="3"><label for="rating-3" aria-label="3 out of 5">3</label>
<input type="radio" id="rating-4" name="rating" value="4"><label for="rating-4" aria-label="4 out of 5">4</label>
<input type="radio" id="rating-5" name="rating" value="5"><label for="rating-5" aria-label="5 out of 5">5</label>
</div>
<div class="rating-key"><span>Needs work</span><span>Excellent</span></div>
</fieldset>
<div class="field full">
<label for="evidence-detail">A specific result or example</label>
<textarea id="evidence-detail" name="evidence_detail" minlength="20" maxlength="3000" required placeholder="Describe one concrete result: a project completed, a classroom outcome, a skill applied, or a change you observed. Avoid general praise and sensitive student information."></textarea>
</div>
<div class="field full">
<label for="message">What should we improve?</label>
<textarea id="message" name="message" minlength="10" maxlength="3000" required placeholder="What worked, what was confusing, and what should AgenticEd improve or add?"></textarea>
<div class="counter"><span id="message-count">0</span>/3000</div>
</div>
<div class="section-title"><h2>Attribution and follow-up</h2><p>You control whether your words may be quoted. Choosing no permission does not affect submission.</p></div>
<div class="field">
<label for="quote-permission">May we quote your feedback?</label>
<select id="quote-permission" name="quote_permission" required><option value="">Choose one</option><option value="none">No, use only in aggregate metrics</option><option value="anonymous">Yes, anonymously</option><option value="attributed">Yes, with my name, title, and organization</option></select>
</div>
<div class="field">
<label for="display-name">Name</label>
<input id="display-name" name="display_name" maxlength="150" autocomplete="name">
</div>
<div class="field">
<label for="job-title">Title or role</label>
<input id="job-title" name="job_title" maxlength="150" autocomplete="organization-title">
</div>
<div class="field full">
<label for="email">Verification or reply email <span class="optional">(optional)</span></label>
<input type="email" id="email" name="email" maxlength="320" autocomplete="email" placeholder="you@example.com">
<p class="field-note">Not displayed publicly. A verifiable contact can strengthen attributed feedback, but is not required.</p>
</div>
<div class="field full consent">
<input type="checkbox" id="accuracy-consent" name="accuracy_consent" required>
<label for="accuracy-consent">I confirm this is my honest, first-hand experience and consent to AgenticEd storing it for curriculum improvement and aggregate impact reporting. My words will be quoted only according to the permission I selected above.</label>
</div>
</div>
<div class="honeypot" aria-hidden="true"><label for="company">Company</label><input id="company" name="company" type="text" tabindex="-1" autocomplete="off"></div>
<p class="privacy-note">Please do not include student names, grades, or sensitive information. Aggregate reports will label outcomes as self-reported. We use submissions to improve AgenticEd and document its reach and outcomes. See our <a href="privacy.html">privacy information</a>.</p>
<div class="actions"><button type="submit" id="submit-feedback">Send feedback</button><p class="status" id="form-status" role="status" aria-live="polite"></p></div>
</form>
</main>
<footer>
<a href="index.html" class="logo"><img class="brand-mark" src="images/agenticed-mark.png" alt="" aria-hidden="true"/>Agentic<em>Ed</em></a>
<div class="footer-links"><a href="privacy.html">Privacy</a><a href="faq.html">FAQ</a><a href="mailto:hello@agenticed.org">hello@agenticed.org</a></div>
</footer>
<script src="feedback.js?v=20260901-1"></script>
</body>
</html>