Hugging Face's logo

Spaces:
tokyotechlab
/
fe
Running

App Files Community
Lucii1 commited on
Commit
a808ab3
·
1 Parent(s): 3d76c67

update

Browse files
Files changed (3) hide show
  1. feedback.js +43 -13
  2. index.html +657 -492
  3. styles.css +12 -0
feedback.js CHANGED
@@ -9,9 +9,28 @@ const blockNotification = document.getElementById(
9
  );
10
  const blockQuestion = document.getElementById('block-question-1765336324468');
11
  const footerFeedback = document.getElementById('footer-feedback-1765336324468');
 
12
  const isSuccess = {};
13
  const isLoading = {};
14
  const isFailed = {};
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  Object.defineProperty(isSuccess, 'value', {
16
  set(newValue) {
17
  if (newValue) {
@@ -23,7 +42,7 @@ Object.defineProperty(isSuccess, 'value', {
23
  blockNotification.innerHTML = contentSentSuccessfully;
24
  blockNotification.classList.remove('display-none');
25
  feedbackButton.disabled = true;
26
- feedbackButton.classList.add('btn-disabled');
27
  footerFeedback.classList.add('display-none');
28
  }
29
 
@@ -34,8 +53,7 @@ Object.defineProperty(isSuccess, 'value', {
34
  blockNotification.classList.add('display-none');
35
  blockQuestion.classList.remove('display-none');
36
  blockNotification.innerHTML = '';
37
- feedbackButton.disabled = false;
38
- feedbackButton.classList.remove('btn-disabled');
39
  footerFeedback.classList.remove('display-none');
40
  }
41
  this._value = newValue;
@@ -46,16 +64,12 @@ Object.defineProperty(isSuccess, 'value', {
46
  });
47
  Object.defineProperty(isLoading, 'value', {
48
  set(newValue) {
49
- if (newValue) {
50
- feedbackButton.disabled = true;
51
- feedbackButton.classList.add('btn-disabled');
52
- feedbackButton.innerText = 'Sending...';
53
- } else {
54
- feedbackButton.disabled = false;
55
- feedbackButton.classList.remove('btn-disabled');
56
- feedbackButton.innerText = 'Send';
57
  }
58
  this._value = newValue;
 
59
  },
60
  get() {
61
  return this._value;
@@ -78,6 +92,8 @@ function resetFeedbackForm() {
78
  stars.forEach((star) => {
79
  star.classList.remove('active');
80
  });
 
 
81
  }
82
 
83
  function assignRadioValues() {
@@ -90,8 +106,7 @@ function assignRadioValues() {
90
  options.forEach((option, index) => {
91
  const radio = option.querySelector('input[type="radio"]');
92
  if (!radio) return;
93
-
94
- if (questionId === 'q0') {
95
  radio.value = String(index + 1);
96
  } else {
97
  const optionText = option
@@ -188,6 +203,11 @@ function collectFeedbackData() {
188
 
189
  async function handleFeedbackSubmit(event) {
190
  event.preventDefault();
 
 
 
 
 
191
  isLoading.value = true;
192
  // Simulate async feedback submission
193
  const feedbackData = collectFeedbackData();
@@ -213,6 +233,16 @@ async function handleFeedbackSubmit(event) {
213
 
214
  assignRadioValues();
215
  initializeStarRatings();
 
 
 
 
 
 
 
 
 
 
216
 
217
  if (feedbackButton) {
218
  feedbackButton.addEventListener('click', handleFeedbackSubmit);
 
9
  );
10
  const blockQuestion = document.getElementById('block-question-1765336324468');
11
  const footerFeedback = document.getElementById('footer-feedback-1765336324468');
12
+ const REQUIRED_QUESTION_IDS = ['q0', 'q1'];
13
  const isSuccess = {};
14
  const isLoading = {};
15
  const isFailed = {};
16
+ let isLoadingInternal = false;
17
+
18
+ function areRequiredQuestionsAnswered() {
19
+ return REQUIRED_QUESTION_IDS.every((id) =>
20
+ document.querySelector(`#${id} input[type="radio"]:checked`)
21
+ );
22
+ }
23
+
24
+ function syncFeedbackButtonState() {
25
+ const missingRequired = !areRequiredQuestionsAnswered();
26
+ const shouldDisable = isLoadingInternal || missingRequired;
27
+
28
+ if (feedbackButton) {
29
+ feedbackButton.disabled = shouldDisable;
30
+ feedbackButton.classList.toggle('btn-disabled', shouldDisable);
31
+ feedbackButton.classList.toggle('disable', shouldDisable);
32
+ }
33
+ }
34
  Object.defineProperty(isSuccess, 'value', {
35
  set(newValue) {
36
  if (newValue) {
 
42
  blockNotification.innerHTML = contentSentSuccessfully;
43
  blockNotification.classList.remove('display-none');
44
  feedbackButton.disabled = true;
45
+ feedbackButton.classList.add('btn-disabled', 'disable');
46
  footerFeedback.classList.add('display-none');
47
  }
48
 
 
53
  blockNotification.classList.add('display-none');
54
  blockQuestion.classList.remove('display-none');
55
  blockNotification.innerHTML = '';
56
+ syncFeedbackButtonState();
 
57
  footerFeedback.classList.remove('display-none');
58
  }
59
  this._value = newValue;
 
64
  });
65
  Object.defineProperty(isLoading, 'value', {
66
  set(newValue) {
67
+ isLoadingInternal = newValue;
68
+ if (feedbackButton) {
69
+ feedbackButton.innerText = newValue ? 'Sending...' : 'Send';
 
 
 
 
 
70
  }
71
  this._value = newValue;
72
+ syncFeedbackButtonState();
73
  },
74
  get() {
75
  return this._value;
 
92
  stars.forEach((star) => {
93
  star.classList.remove('active');
94
  });
95
+
96
+ syncFeedbackButtonState();
97
  }
98
 
99
  function assignRadioValues() {
 
106
  options.forEach((option, index) => {
107
  const radio = option.querySelector('input[type="radio"]');
108
  if (!radio) return;
109
+ if (questionId === '') {
 
110
  radio.value = String(index + 1);
111
  } else {
112
  const optionText = option
 
203
 
204
  async function handleFeedbackSubmit(event) {
205
  event.preventDefault();
206
+
207
+ if (!areRequiredQuestionsAnswered()) {
208
+ syncFeedbackButtonState();
209
+ return;
210
+ }
211
  isLoading.value = true;
212
  // Simulate async feedback submission
213
  const feedbackData = collectFeedbackData();
 
233
 
234
  assignRadioValues();
235
  initializeStarRatings();
236
+ syncFeedbackButtonState();
237
+
238
+ const requiredRadios = document.querySelectorAll(
239
+ '#q0 input[type="radio"], #q1 input[type="radio"]'
240
+ );
241
+ requiredRadios.forEach((radio) => {
242
+ radio.addEventListener('change', () => {
243
+ syncFeedbackButtonState();
244
+ });
245
+ });
246
 
247
  if (feedbackButton) {
248
  feedbackButton.addEventListener('click', handleFeedbackSubmit);
index.html CHANGED
@@ -169,7 +169,7 @@
169
  </div>
170
  <div class="content-feedback">
171
  <div id="block-question-1765336324468" class="flex flex-col gap-6">
172
- <div class="question" id="q0">
173
  <div class="q-title">How accurate was the conclusion?</div>
174
  <div class="options-stars">
175
  <div class="option">
@@ -203,543 +203,708 @@
203
  </label>
204
  </div>
205
  </div>
206
- </div>
207
- <div class="question" id="q1">
208
- <div class="q-title">
209
- Did the algorithm correctly classify this content?
 
210
  </div>
211
- <div class="options">
212
- <div class="option">
213
- <label class="opt">
214
- <input type="radio" name="q1" />
215
- <div class="radio"></div>
216
- <div class="option-text">Yes</div>
217
- </label>
218
- </div>
219
- <div class="option">
220
- <label class="opt">
221
- <input type="radio" name="q1" />
222
- <div class="radio"></div>
223
- <div class="option-text">No - It was actually Real</div>
224
- </label>
225
- </div>
226
- <div class="option">
227
- <label class="opt">
228
- <input type="radio" name="q1" />
229
- <div class="radio"></div>
230
- <div class="option-text">
231
- No - It was actually AI-Generated
232
  </div>
233
- </label>
234
- </div>
235
- </div>
236
- </div>
237
- <div class="question" id="q2">
238
- <div class="q-title">Were the provided links relevant?</div>
239
- <div class="options links-list">
240
- <div class="option">
241
- <label class="opt">
242
- <input type="radio" name="q2" />
243
- <div class="radio"></div>
244
- <div class="option-text">
245
- ✅ All links worked and were relevant
246
  </div>
247
- </label>
248
- </div>
249
- <div class="option">
250
- <label class="opt">
251
- <input type="radio" name="q2" />
252
- <div class="radio"></div>
253
- <div class="option-text">
254
- ⚠️ Some links were broken/dead
255
  </div>
256
- </label>
257
- </div>
258
- <div class="option">
259
- <label class="opt">
260
- <input class="radio" type="radio" name="q2" />
261
- <div class="radio"></div>
262
- <div class="option-text">
263
- ❌ Links were unrelated to the topic
264
  </div>
265
- </label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
266
  </div>
267
  </div>
268
  </div>
269
- <div class="question" id="q3">
270
- <div class="q-title">
271
- Was the technical analysis understandable?
 
 
 
272
  </div>
273
- <div class="options links-list">
274
- <div class="option">
275
- <label class="opt">
276
- <input type="radio" name="q3" />
277
- <div class="radio"></div>
278
- <div class="option-text">Yes, clear</div></label
279
- >
280
- </div>
281
- <div class="option">
282
- <label class="opt">
283
- <input type="radio" name="q3" />
284
- <div class="radio"></div>
285
- <div class="option-text">
286
- Too technical / Hard to understand
287
  </div>
288
- </label>
289
- </div>
290
- <div class="option">
291
- <label class="opt">
292
- <input class="radio" type="radio" name="q3" />
293
- <div class="radio"></div>
294
- <div class="option-text">Not enough detail</div>
295
- </label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
296
  </div>
297
  </div>
298
  </div>
299
- <div class="question" id="q4">
300
- <div class="q-title">
301
- Did the report contain any hallucinations (made-up facts)?
 
 
 
 
302
  </div>
303
- <div class="options links-list">
304
- <div class="option">
305
- <label class="opt">
306
- <input type="radio" name="q4" />
307
- <div class="radio"></div>
308
- <div class="option-text">No issues</div></label
309
- >
310
- </div>
311
- <div class="option">
312
- <label class="opt">
313
- <input type="radio" name="q4" />
314
- <div class="radio"></div>
315
- <div class="option-text">Invented dates/times</div>
316
- </label>
317
- </div>
318
- <div class="option">
319
- <label class="opt">
320
- <input class="radio" type="radio" name="q4" />
321
- <div class="radio"></div>
322
- <div class="option-text">Invented people/names</div>
323
- </label>
324
- </div>
325
- <div class="option">
326
- <label class="opt">
327
- <input class="radio" type="radio" name="q4" />
328
- <div class="radio"></div>
329
- <div class="option-text">Citations that don't exist</div>
330
- </label>
 
 
 
 
 
 
 
 
 
331
  </div>
332
  </div>
333
  </div>
334
  <!-- 2.4 -->
335
- <div class="question" id="q5">
336
- <div class="q-title">
337
- Did the app clearly identify the main people, organizations,
338
- or sources involved in the news item?
339
- </div>
340
- <div class="options-stars">
341
- <div class="option">
342
- <label class="opt">
343
- <input type="radio" name="q5" />
344
- <div class="star"></div>
345
- </label>
346
- </div>
347
- <div class="option">
348
- <label class="opt">
349
- <input type="radio" name="q5" />
350
- <div class="star"></div>
351
- </label>
352
- </div>
353
- <div class="option">
354
- <label class="opt">
355
- <input type="radio" name="q5" />
356
- <div class="star"></div>
357
- </label>
358
- </div>
359
- <div class="option">
360
- <label class="opt">
361
- <input type="radio" name="q5" />
362
- <div class="star"></div>
363
- </label>
364
- </div>
365
- <div class="option">
366
- <label class="opt">
367
- <input type="radio" name="q5" />
368
- <div class="star"></div>
369
- </label>
370
- </div>
371
- </div>
372
- </div>
373
- <div class="question" id="q6">
374
- <div class="q-title">
375
- How accurate did the app's assessment of the credibility of
376
- the "Who" (e.g., source, expert, witness) seem to you?
377
  </div>
378
- <div class="options-stars">
379
- <div class="option">
380
- <label class="opt">
381
- <input type="radio" name="q6" />
382
- <div class="star"></div>
383
- </label>
384
- </div>
385
- <div class="option">
386
- <label class="opt">
387
- <input type="radio" name="q6" />
388
- <div class="star"></div>
389
- </label>
390
- </div>
391
- <div class="option">
392
- <label class="opt">
393
- <input type="radio" name="q6" />
394
- <div class="star"></div>
395
- </label>
396
- </div>
397
- <div class="option">
398
- <label class="opt">
399
- <input type="radio" name="q6" />
400
- <div class="star"></div>
401
- </label>
402
- </div>
403
- <div class="option">
404
- <label class="opt">
405
- <input type="radio" name="q6" />
406
- <div class="star"></div>
407
- </label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
408
  </div>
409
  </div>
410
  </div>
 
411
  <!-- 2.5 -->
412
- <div class="question" id="q7">
413
- <div class="q-title">
414
- Did the app correctly identify the central claim or action of
415
- the news story?
416
- </div>
417
- <div class="options links-list">
418
- <div class="option">
419
- <label class="opt">
420
- <input type="radio" name="q7" />
421
- <div class="radio"></div>
422
- <div class="option-text">Yes</div></label
423
- >
424
- </div>
425
- <div class="option">
426
- <label class="opt">
427
- <input type="radio" name="q7" />
428
- <div class="radio"></div>
429
- <div class="option-text">No</div>
430
- </label>
431
- </div>
432
- <div class="option">
433
- <label class="opt">
434
- <input class="radio" type="radio" name="q7" />
435
- <div class="radio"></div>
436
- <div class="option-text">Partially</div>
437
- </label>
438
- </div>
439
- </div>
440
- </div>
441
- <div class="question" id="q8">
442
- <div class="q-title">
443
- How well did the app's verification evidence address the
444
- specific details of the "What"?"
445
  </div>
446
- <div class="options-stars">
447
- <div class="option">
448
- <label class="opt">
449
- <input type="radio" name="q8" />
450
- <div class="star"></div>
451
- </label>
452
- </div>
453
- <div class="option">
454
- <label class="opt">
455
- <input type="radio" name="q8" />
456
- <div class="star"></div>
457
- </label>
458
- </div>
459
- <div class="option">
460
- <label class="opt">
461
- <input type="radio" name="q8" />
462
- <div class="star"></div>
463
- </label>
464
- </div>
465
- <div class="option">
466
- <label class="opt">
467
- <input type="radio" name="q8" />
468
- <div class="star"></div>
469
- </label>
470
- </div>
471
- <div class="option">
472
- <label class="opt">
473
- <input type="radio" name="q8" />
474
- <div class="star"></div>
475
- </label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
476
  </div>
477
  </div>
478
  </div>
 
479
  <!-- 2.6 -->
480
- <div class="question" id="q9">
481
- <div class="q-title">
482
- Did the app clearly show when the original event/information
483
- was first published or occurred?
484
- </div>
485
- <div class="options-stars">
486
- <div class="option">
487
- <label class="opt">
488
- <input type="radio" name="q9" />
489
- <div class="star"></div>
490
- </label>
491
- </div>
492
- <div class="option">
493
- <label class="opt">
494
- <input type="radio" name="q9" />
495
- <div class="star"></div>
496
- </label>
497
- </div>
498
- <div class="option">
499
- <label class="opt">
500
- <input type="radio" name="q9" />
501
- <div class="star"></div>
502
- </label>
503
- </div>
504
- <div class="option">
505
- <label class="opt">
506
- <input type="radio" name="q9" />
507
- <div class="star"></div>
508
- </label>
509
- </div>
510
- <div class="option">
511
- <label class="opt">
512
- <input type="radio" name="q9" />
513
- <div class="star"></div>
514
- </label>
515
- </div>
516
  </div>
517
- </div>
518
- <div class="question" id="q10">
519
- <div class="q-title">
520
- How useful was the time context (e.g., date, timeline of
521
- events) in helping you determine the news' authenticity?
522
- </div>
523
- <div class="options-stars">
524
- <div class="option">
525
- <label class="opt">
526
- <input type="radio" name="q10" />
527
- <div class="star"></div>
528
- </label>
529
- </div>
530
- <div class="option">
531
- <label class="opt">
532
- <input type="radio" name="q10" />
533
- <div class="star"></div>
534
- </label>
535
- </div>
536
- <div class="option">
537
- <label class="opt">
538
- <input type="radio" name="q10" />
539
- <div class="star"></div>
540
- </label>
541
- </div>
542
- <div class="option">
543
- <label class="opt">
544
- <input type="radio" name="q10" />
545
- <div class="star"></div>
546
- </label>
547
- </div>
548
- <div class="option">
549
- <label class="opt">
550
- <input type="radio" name="q10" />
551
- <div class="star"></div>
552
- </label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
553
  </div>
554
  </div>
555
  </div>
 
556
  <!-- 2.7 -->
557
- <div class="question" id="q11">
558
- <div class="q-title">
559
- Was the location of the event ("Where") specified and verified
560
- by the app's output?
561
- </div>
562
- <div class="options links-list">
563
- <div class="option">
564
- <label class="opt">
565
- <input type="radio" name="q11" />
566
- <div class="radio"></div>
567
- <div class="option-text">Yes</div></label
568
- >
569
- </div>
570
- <div class="option">
571
- <label class="opt">
572
- <input type="radio" name="q11" />
573
- <div class="radio"></div>
574
- <div class="option-text">No</div>
575
- </label>
576
- </div>
577
- <div class="option">
578
- <label class="opt">
579
- <input class="radio" type="radio" name="q11" />
580
- <div class="radio"></div>
581
- <div class="option-text">Not Applicable</div>
582
- </label>
583
- </div>
584
  </div>
585
- </div>
586
- <div class="question" id="q12">
587
- <div class="q-title">
588
- Did the app provide sufficient evidence (e.g., images, maps,
589
- source addresses) to confirm the "Where" of the event?
590
- </div>
591
- <div class="options-stars">
592
- <div class="option">
593
- <label class="opt">
594
- <input type="radio" name="q12" />
595
- <div class="star"></div>
596
- </label>
597
- </div>
598
- <div class="option">
599
- <label class="opt">
600
- <input type="radio" name="q12" />
601
- <div class="star"></div>
602
- </label>
603
- </div>
604
- <div class="option">
605
- <label class="opt">
606
- <input type="radio" name="q12" />
607
- <div class="star"></div>
608
- </label>
609
- </div>
610
- <div class="option">
611
- <label class="opt">
612
- <input type="radio" name="q12" />
613
- <div class="star"></div>
614
- </label>
615
- </div>
616
- <div class="option">
617
- <label class="opt">
618
- <input type="radio" name="q12" />
619
- <div class="star"></div>
620
- </label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
621
  </div>
622
  </div>
623
  </div>
 
624
  <!-- 2.8 -->
625
- <div class="question" id="q13">
626
- <div class="q-title">
627
- How well did the app explain the motive or purpose behind the
628
- original claim (e.g., persuasion, profit, error)?
629
- </div>
630
- <div class="options-stars">
631
- <div class="option">
632
- <label class="opt">
633
- <input type="radio" name="q13" />
634
- <div class="star"></div>
635
- </label>
636
- </div>
637
- <div class="option">
638
- <label class="opt">
639
- <input type="radio" name="q13" />
640
- <div class="star"></div>
641
- </label>
642
- </div>
643
- <div class="option">
644
- <label class="opt">
645
- <input type="radio" name="q13" />
646
- <div class="star"></div>
647
- </label>
648
- </div>
649
- <div class="option">
650
- <label class="opt">
651
- <input type="radio" name="q13" />
652
- <div class="star"></div>
653
- </label>
654
- </div>
655
- <div class="option">
656
- <label class="opt">
657
- <input type="radio" name="q13" />
658
- <div class="star"></div>
659
- </label>
660
- </div>
661
- </div>
662
- </div>
663
- <div class="question" id="q14">
664
- <div class="q-title">
665
- Did the "Why" section help you understand if the news was
666
- designed to be misleading or biased?
667
  </div>
668
- <div class="options links-list">
669
- <div class="option">
670
- <label class="opt">
671
- <input type="radio" name="q14" />
672
- <div class="radio"></div>
673
- <div class="option-text">Yes</div></label
674
- >
675
- </div>
676
- <div class="option">
677
- <label class="opt">
678
- <input type="radio" name="q14" />
679
- <div class="radio"></div>
680
- <div class="option-text">No</div>
681
- </label>
682
- </div>
683
- <div class="option">
684
- <label class="opt">
685
- <input class="radio" type="radio" name="q14" />
686
- <div class="radio"></div>
687
- <div class="option-text">Already Clear</div>
688
- </label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
689
  </div>
690
  </div>
691
  </div>
 
692
  <!-- 2.9 -->
693
- <div class="question" id="q15">
694
- <div class="q-title">What is your profession?</div>
695
- <div class="options links-list">
696
- <div class="option">
697
- <label class="opt">
698
- <input type="radio" name="q15" />
699
- <div class="radio"></div>
700
- <div class="option-text">
701
- Journalist / Fact Checker
702
- </div></label
703
- >
704
- </div>
705
- <div class="option">
706
- <label class="opt">
707
- <input type="radio" name="q15" />
708
- <div class="radio"></div>
709
- <div class="option-text">Researcher / Student</div>
710
- </label>
711
- </div>
712
- <div class="option">
713
- <label class="opt">
714
- <input class="radio" type="radio" name="q15" />
715
- <div class="radio"></div>
716
- <div class="option-text">Law Enforcement / OSINT</div>
717
- </label>
718
- </div>
719
- <div class="option">
720
- <label class="opt">
721
- <input class="radio" type="radio" name="q15" />
722
- <div class="radio"></div>
723
- <div class="option-text">General User</div>
724
- </label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
725
  </div>
726
  </div>
727
  </div>
728
- <div class="question" id="q16">
729
- <label class="textarea" for="feedback-q16-comments">
730
- <span class="textarea-label">
731
- Help us improve. If the verification failed, what did we
732
- miss?
733
- </span>
734
- </label>
735
- <textarea
736
- id="feedback-q16-comments"
737
- class="feedback-textarea"
738
- name="q16_comments"
739
- rows="4"
740
- placeholder="Text value"
741
- ></textarea>
742
- </div>
743
  </div>
744
  <div
745
  id="block-notification-1765336324468"
 
169
  </div>
170
  <div class="content-feedback">
171
  <div id="block-question-1765336324468" class="flex flex-col gap-6">
172
+ <!-- <div class="question" id="q0">
173
  <div class="q-title">How accurate was the conclusion?</div>
174
  <div class="options-stars">
175
  <div class="option">
 
203
  </label>
204
  </div>
205
  </div>
206
+ </div> -->
207
+ <!-- 2.1 -->
208
+ <div class="flex flex-col gap-2">
209
+ <div>
210
+ <h3 class="section-title">The "Accuracy Check"</h3>
211
  </div>
212
+ <div class="flex flex-col gap-2 pl-4">
213
+ <div class="question" id="q0">
214
+ <div class="q-title">
215
+ How accurate was the conclusion?<span class="required"
216
+ >*</span
217
+ >
218
+ </div>
219
+ <div class="options">
220
+ <div class="option">
221
+ <label class="opt">
222
+ <input type="radio" name="q0" />
223
+ <div class="radio"></div>
224
+ <div class="option-text">Completely wrong</div>
225
+ </label>
 
 
 
 
 
 
 
226
  </div>
227
+ <div class="option">
228
+ <label class="opt">
229
+ <input type="radio" name="q0" />
230
+ <div class="radio"></div>
231
+ <div class="option-text">Missed key context</div>
232
+ </label>
 
 
 
 
 
 
 
233
  </div>
234
+ <div class="option">
235
+ <label class="opt">
236
+ <input type="radio" name="q0" />
237
+ <div class="radio"></div>
238
+ <div class="option-text">Mixed results</div>
239
+ </label>
 
 
240
  </div>
241
+ <div class="option">
242
+ <label class="opt">
243
+ <input type="radio" name="q0" />
244
+ <div class="radio"></div>
245
+ <div class="option-text">Mostly correct</div>
246
+ </label>
 
 
247
  </div>
248
+ <div class="option">
249
+ <label class="opt">
250
+ <input type="radio" name="q0" />
251
+ <div class="radio"></div>
252
+ <div class="option-text">Spot on</div>
253
+ </label>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ <div class="question" id="q1">
258
+ <div class="q-title">
259
+ Did the algorithm correctly classify this content?<span
260
+ class="required"
261
+ >*</span
262
+ >
263
+ </div>
264
+ <div class="options">
265
+ <div class="option">
266
+ <label class="opt">
267
+ <input type="radio" name="q1" />
268
+ <div class="radio"></div>
269
+ <div class="option-text">Yes</div>
270
+ </label>
271
+ </div>
272
+ <div class="option">
273
+ <label class="opt">
274
+ <input type="radio" name="q1" />
275
+ <div class="radio"></div>
276
+ <div class="option-text">
277
+ No - It was actually Real
278
+ </div>
279
+ </label>
280
+ </div>
281
+ <div class="option">
282
+ <label class="opt">
283
+ <input type="radio" name="q1" />
284
+ <div class="radio"></div>
285
+ <div class="option-text">
286
+ No - It was actually AI-Generated
287
+ </div>
288
+ </label>
289
+ </div>
290
+ </div>
291
  </div>
292
  </div>
293
  </div>
294
+ <!-- 2.2 -->
295
+ <div class="flex flex-col gap-2">
296
+ <div>
297
+ <h3 class="section-title">
298
+ Tab-Specific Feedback (Granular)
299
+ </h3>
300
  </div>
301
+ <div class="flex flex-col gap-2 pl-4">
302
+ <div class="question" id="q2">
303
+ <div class="q-title">Were the provided links relevant?</div>
304
+ <div class="options links-list">
305
+ <div class="option">
306
+ <label class="opt">
307
+ <input type="radio" name="q2" />
308
+ <div class="radio"></div>
309
+ <div class="option-text">
310
+ All links worked and were relevant
311
+ </div>
312
+ </label>
 
 
313
  </div>
314
+ <div class="option">
315
+ <label class="opt">
316
+ <input type="radio" name="q2" />
317
+ <div class="radio"></div>
318
+ <div class="option-text">
319
+ Some links were broken/dead
320
+ </div>
321
+ </label>
322
+ </div>
323
+ <div class="option">
324
+ <label class="opt">
325
+ <input class="radio" type="radio" name="q2" />
326
+ <div class="radio"></div>
327
+ <div class="option-text">
328
+ Links were unrelated to the topic
329
+ </div>
330
+ </label>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ <div class="question" id="q3">
335
+ <div class="q-title">
336
+ Was the technical analysis understandable?
337
+ </div>
338
+ <div class="options links-list">
339
+ <div class="option">
340
+ <label class="opt">
341
+ <input type="radio" name="q3" />
342
+ <div class="radio"></div>
343
+ <div class="option-text">Yes, clear</div></label
344
+ >
345
+ </div>
346
+ <div class="option">
347
+ <label class="opt">
348
+ <input type="radio" name="q3" />
349
+ <div class="radio"></div>
350
+ <div class="option-text">
351
+ Too technical / Hard to understand
352
+ </div>
353
+ </label>
354
+ </div>
355
+ <div class="option">
356
+ <label class="opt">
357
+ <input class="radio" type="radio" name="q3" />
358
+ <div class="radio"></div>
359
+ <div class="option-text">Not enough detail</div>
360
+ </label>
361
+ </div>
362
+ </div>
363
  </div>
364
  </div>
365
  </div>
366
+
367
+ <!-- 2.3 -->
368
+ <div class="flex flex-col gap-2">
369
+ <div>
370
+ <h3 class="section-title">
371
+ The "Hallucination" Check (Critical for AI)
372
+ </h3>
373
  </div>
374
+ <div class="flex flex-col gap-2 pl-4">
375
+ <div class="question" id="q4">
376
+ <div class="q-title">
377
+ Did the report contain any hallucinations (made-up facts)?
378
+ </div>
379
+ <div class="options links-list">
380
+ <div class="option">
381
+ <label class="opt">
382
+ <input type="radio" name="q4" />
383
+ <div class="radio"></div>
384
+ <div class="option-text">No issues</div></label
385
+ >
386
+ </div>
387
+ <div class="option">
388
+ <label class="opt">
389
+ <input type="radio" name="q4" />
390
+ <div class="radio"></div>
391
+ <div class="option-text">Invented dates/times</div>
392
+ </label>
393
+ </div>
394
+ <div class="option">
395
+ <label class="opt">
396
+ <input class="radio" type="radio" name="q4" />
397
+ <div class="radio"></div>
398
+ <div class="option-text">Invented people/names</div>
399
+ </label>
400
+ </div>
401
+ <div class="option">
402
+ <label class="opt">
403
+ <input class="radio" type="radio" name="q4" />
404
+ <div class="radio"></div>
405
+ <div class="option-text">
406
+ Citations that don't exist
407
+ </div>
408
+ </label>
409
+ </div>
410
+ </div>
411
  </div>
412
  </div>
413
  </div>
414
  <!-- 2.4 -->
415
+ <div class="flex flex-col gap-2">
416
+ <div>
417
+ <h3 class="section-title">
418
+ Who (Source and Subject Credibility)
419
+ </h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
420
  </div>
421
+ <div class="flex flex-col gap-2 pl-4">
422
+ <div class="question" id="q5">
423
+ <div class="q-title">
424
+ Did the app clearly identify the main people,
425
+ organizations, or sources involved in the news item?
426
+ </div>
427
+ <div class="options">
428
+ <div class="option">
429
+ <label class="opt">
430
+ <input type="radio" name="q5" />
431
+ <div class="radio"></div>
432
+ <div class="option-text">Not Clear</div>
433
+ </label>
434
+ </div>
435
+ <div class="option">
436
+ <label class="opt">
437
+ <input type="radio" name="q5" />
438
+ <div class="radio"></div>
439
+ <div class="option-text">Slightly Clear</div>
440
+ </label>
441
+ </div>
442
+ <div class="option">
443
+ <label class="opt">
444
+ <input type="radio" name="q5" />
445
+ <div class="radio"></div>
446
+ <div class="option-text">Moderately Clear</div>
447
+ </label>
448
+ </div>
449
+ <div class="option">
450
+ <label class="opt">
451
+ <input type="radio" name="q5" />
452
+ <div class="radio"></div>
453
+ <div class="option-text">Clear</div>
454
+ </label>
455
+ </div>
456
+ <div class="option">
457
+ <label class="opt">
458
+ <input type="radio" name="q5" />
459
+ <div class="radio"></div>
460
+ <div class="option-text">Very Clear</div>
461
+ </label>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ <div class="question" id="q6">
466
+ <div class="q-title">
467
+ How accurate did the app's assessment of the credibility
468
+ of the "Who" (e.g., source, expert, witness) seem to you?
469
+ </div>
470
+ <div class="options">
471
+ <div class="option">
472
+ <label class="opt">
473
+ <input type="radio" name="q6" />
474
+ <div class="radio"></div>
475
+ <div class="option-text">Highly Inaccurate</div>
476
+ </label>
477
+ </div>
478
+ <div class="option">
479
+ <label class="opt">
480
+ <input type="radio" name="q6" />
481
+ <div class="radio"></div>
482
+ <div class="option-text">Inaccurate</div>
483
+ </label>
484
+ </div>
485
+ <div class="option">
486
+ <label class="opt">
487
+ <input type="radio" name="q6" />
488
+ <div class="radio"></div>
489
+ <div class="option-text">Moderately Accurate</div>
490
+ </label>
491
+ </div>
492
+ <div class="option">
493
+ <label class="opt">
494
+ <input type="radio" name="q6" />
495
+ <div class="radio"></div>
496
+ <div class="option-text">Accurate</div>
497
+ </label>
498
+ </div>
499
+ <div class="option">
500
+ <label class="opt">
501
+ <input type="radio" name="q6" />
502
+ <div class="radio"></div>
503
+ <div class="option-text">Highly Accurate</div>
504
+ </label>
505
+ </div>
506
+ </div>
507
  </div>
508
  </div>
509
  </div>
510
+
511
  <!-- 2.5 -->
512
+ <div class="flex flex-col gap-2">
513
+ <div>
514
+ <h3 class="section-title">What (The Core Claim/Action)</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
515
  </div>
516
+ <div class="flex flex-col gap-2 pl-4">
517
+ <div class="question" id="q7">
518
+ <div class="q-title">
519
+ Did the app correctly identify the central claim or action
520
+ of the news story?
521
+ </div>
522
+ <div class="options links-list">
523
+ <div class="option">
524
+ <label class="opt">
525
+ <input type="radio" name="q7" />
526
+ <div class="radio"></div>
527
+ <div class="option-text">Yes</div></label
528
+ >
529
+ </div>
530
+ <div class="option">
531
+ <label class="opt">
532
+ <input type="radio" name="q7" />
533
+ <div class="radio"></div>
534
+ <div class="option-text">No</div>
535
+ </label>
536
+ </div>
537
+ <div class="option">
538
+ <label class="opt">
539
+ <input class="radio" type="radio" name="q7" />
540
+ <div class="radio"></div>
541
+ <div class="option-text">Partially</div>
542
+ </label>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ <div class="question" id="q8">
547
+ <div class="q-title">
548
+ How well did the app's verification evidence address the
549
+ specific details of the "What"?
550
+ </div>
551
+ <div class="options">
552
+ <div class="option">
553
+ <label class="opt">
554
+ <input type="radio" name="q8" />
555
+ <div class="radio"></div>
556
+ <div class="option-text">Not Relevant</div>
557
+ </label>
558
+ </div>
559
+ <div class="option">
560
+ <label class="opt">
561
+ <input type="radio" name="q8" />
562
+ <div class="radio"></div>
563
+ <div class="option-text">Slightly Relevant</div>
564
+ </label>
565
+ </div>
566
+ <div class="option">
567
+ <label class="opt">
568
+ <input type="radio" name="q8" />
569
+ <div class="radio"></div>
570
+ <div class="option-text">Moderately Relevant</div>
571
+ </label>
572
+ </div>
573
+ <div class="option">
574
+ <label class="opt">
575
+ <input type="radio" name="q8" />
576
+ <div class="radio"></div>
577
+ <div class="option-text">Relevant</div>
578
+ </label>
579
+ </div>
580
+ <div class="option">
581
+ <label class="opt">
582
+ <input type="radio" name="q8" />
583
+ <div class="radio"></div>
584
+ <div class="option-text">Highly Relevant</div>
585
+ </label>
586
+ </div>
587
+ </div>
588
  </div>
589
  </div>
590
  </div>
591
+
592
  <!-- 2.6 -->
593
+ <div class="flex flex-col gap-2">
594
+ <div>
595
+ <h3 class="section-title">When (Timeliness and Context)</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
596
  </div>
597
+ <div class="flex flex-col gap-2 pl-4">
598
+ <div class="question" id="q9">
599
+ <div class="q-title">
600
+ Did the app clearly show when the original
601
+ event/information was first published or occurred?
602
+ </div>
603
+ <div class="options">
604
+ <div class="option">
605
+ <label class="opt">
606
+ <input type="radio" name="q9" />
607
+ <div class="radio"></div>
608
+ <div class="option-text">Not Clear</div>
609
+ </label>
610
+ </div>
611
+ <div class="option">
612
+ <label class="opt">
613
+ <input type="radio" name="q9" />
614
+ <div class="radio"></div>
615
+ <div class="option-text">Slightly Clear</div>
616
+ </label>
617
+ </div>
618
+ <div class="option">
619
+ <label class="opt">
620
+ <input type="radio" name="q9" />
621
+ <div class="radio"></div>
622
+ <div class="option-text">Moderately Clear</div>
623
+ </label>
624
+ </div>
625
+ <div class="option">
626
+ <label class="opt">
627
+ <input type="radio" name="q9" />
628
+ <div class="radio"></div>
629
+ <div class="option-text">Clear</div>
630
+ </label>
631
+ </div>
632
+ <div class="option">
633
+ <label class="opt">
634
+ <input type="radio" name="q9" />
635
+ <div class="radio"></div>
636
+ <div class="option-text">Very Clear</div>
637
+ </label>
638
+ </div>
639
+ </div>
640
+ </div>
641
+ <div class="question" id="q10">
642
+ <div class="q-title">
643
+ How useful was the time context (e.g., date, timeline of
644
+ events) in helping you determine the news' authenticity?
645
+ </div>
646
+ <div class="options">
647
+ <div class="option">
648
+ <label class="opt">
649
+ <input type="radio" name="q10" />
650
+ <div class="radio"></div>
651
+ <div class="option-text">Not Useful</div>
652
+ </label>
653
+ </div>
654
+ <div class="option">
655
+ <label class="opt">
656
+ <input type="radio" name="q10" />
657
+ <div class="radio"></div>
658
+ <div class="option-text">Slightly Useful</div>
659
+ </label>
660
+ </div>
661
+ <div class="option">
662
+ <label class="opt">
663
+ <input type="radio" name="q10" />
664
+ <div class="radio"></div>
665
+ <div class="option-text">Moderately Useful</div>
666
+ </label>
667
+ </div>
668
+ <div class="option">
669
+ <label class="opt">
670
+ <input type="radio" name="q10" />
671
+ <div class="radio"></div>
672
+ <div class="option-text">Useful</div>
673
+ </label>
674
+ </div>
675
+ <div class="option">
676
+ <label class="opt">
677
+ <input type="radio" name="q10" />
678
+ <div class="radio"></div>
679
+ <div class="option-text">Very Useful</div>
680
+ </label>
681
+ </div>
682
+ </div>
683
  </div>
684
  </div>
685
  </div>
686
+
687
  <!-- 2.7 -->
688
+ <div class="flex flex-col gap-2">
689
+ <div>
690
+ <h3 class="section-title">Where (Location and Setting)</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
691
  </div>
692
+ <div class="flex flex-col gap-2 pl-4">
693
+ <div class="question" id="q11">
694
+ <div class="q-title">
695
+ Was the location of the event ("Where") specified and
696
+ verified by the app's output?
697
+ </div>
698
+ <div class="options links-list">
699
+ <div class="option">
700
+ <label class="opt">
701
+ <input type="radio" name="q11" />
702
+ <div class="radio"></div>
703
+ <div class="option-text">Yes</div></label
704
+ >
705
+ </div>
706
+ <div class="option">
707
+ <label class="opt">
708
+ <input type="radio" name="q11" />
709
+ <div class="radio"></div>
710
+ <div class="option-text">No</div>
711
+ </label>
712
+ </div>
713
+ <div class="option">
714
+ <label class="opt">
715
+ <input class="radio" type="radio" name="q11" />
716
+ <div class="radio"></div>
717
+ <div class="option-text">Not Applicable</div>
718
+ </label>
719
+ </div>
720
+ </div>
721
+ </div>
722
+ <div class="question" id="q12">
723
+ <div class="q-title">
724
+ Did the app provide sufficient evidence (e.g., images,
725
+ maps, source addresses) to confirm the "Where" of the
726
+ event?
727
+ </div>
728
+ <div class="options">
729
+ <div class="option">
730
+ <label class="opt">
731
+ <input type="radio" name="q12" />
732
+ <div class="radio"></div>
733
+ <div class="option-text">Insufficient</div>
734
+ </label>
735
+ </div>
736
+ <div class="option">
737
+ <label class="opt">
738
+ <input type="radio" name="q12" />
739
+ <div class="radio"></div>
740
+ <div class="option-text">Slightly Sufficient</div>
741
+ </label>
742
+ </div>
743
+ <div class="option">
744
+ <label class="opt">
745
+ <input type="radio" name="q12" />
746
+ <div class="radio"></div>
747
+ <div class="option-text">Moderately Sufficient</div>
748
+ </label>
749
+ </div>
750
+ <div class="option">
751
+ <label class="opt">
752
+ <input type="radio" name="q12" />
753
+ <div class="radio"></div>
754
+ <div class="option-text">Sufficient</div>
755
+ </label>
756
+ </div>
757
+ <div class="option">
758
+ <label class="opt">
759
+ <input type="radio" name="q12" />
760
+ <div class="radio"></div>
761
+ <div class="option-text">More than Sufficient</div>
762
+ </label>
763
+ </div>
764
+ </div>
765
  </div>
766
  </div>
767
  </div>
768
+
769
  <!-- 2.8 -->
770
+ <div class="flex flex-col gap-2">
771
+ <div>
772
+ <h3 class="section-title">Why (Motive and Context)</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
773
  </div>
774
+ <div class="flex flex-col gap-2 pl-4">
775
+ <div class="question" id="q13">
776
+ <div class="q-title">
777
+ How well did the app explain the motive or purpose behind
778
+ the original claim (e.g., persuasion, profit, error)?
779
+ </div>
780
+ <div class="options">
781
+ <div class="option">
782
+ <label class="opt">
783
+ <input type="radio" name="q13" />
784
+ <div class="radio"></div>
785
+ <div class="option-text">Not Explained</div>
786
+ </label>
787
+ </div>
788
+ <div class="option">
789
+ <label class="opt">
790
+ <input type="radio" name="q13" />
791
+ <div class="radio"></div>
792
+ <div class="option-text">Poorly Explained</div>
793
+ </label>
794
+ </div>
795
+ <div class="option">
796
+ <label class="opt">
797
+ <input type="radio" name="q13" />
798
+ <div class="radio"></div>
799
+ <div class="option-text">Moderately Explained</div>
800
+ </label>
801
+ </div>
802
+ <div class="option">
803
+ <label class="opt">
804
+ <input type="radio" name="q13" />
805
+ <div class="radio"></div>
806
+ <div class="option-text">Well Explained</div>
807
+ </label>
808
+ </div>
809
+ <div class="option">
810
+ <label class="opt">
811
+ <input type="radio" name="q13" />
812
+ <div class="radio"></div>
813
+ <div class="option-text">Clearly Explained</div>
814
+ </label>
815
+ </div>
816
+ </div>
817
+ </div>
818
+ <div class="question" id="q14">
819
+ <div class="q-title">
820
+ Did the "Why" section help you understand if the news was
821
+ designed to be misleading or biased?
822
+ </div>
823
+ <div class="options links-list">
824
+ <div class="option">
825
+ <label class="opt">
826
+ <input type="radio" name="q14" />
827
+ <div class="radio"></div>
828
+ <div class="option-text">Yes</div></label
829
+ >
830
+ </div>
831
+ <div class="option">
832
+ <label class="opt">
833
+ <input type="radio" name="q14" />
834
+ <div class="radio"></div>
835
+ <div class="option-text">No</div>
836
+ </label>
837
+ </div>
838
+ <div class="option">
839
+ <label class="opt">
840
+ <input class="radio" type="radio" name="q14" />
841
+ <div class="radio"></div>
842
+ <div class="option-text">Already Clear</div>
843
+ </label>
844
+ </div>
845
+ </div>
846
  </div>
847
  </div>
848
  </div>
849
+
850
  <!-- 2.9 -->
851
+ <div class="flex flex-col gap-2">
852
+ <div>
853
+ <h3 class="section-title">About You</h3>
854
+ </div>
855
+ <div class="flex flex-col gap-2 pl-4">
856
+ <div class="question" id="q15">
857
+ <div class="q-title">What is your profession?</div>
858
+ <div class="options links-list">
859
+ <div class="option">
860
+ <label class="opt">
861
+ <input type="radio" name="q15" />
862
+ <div class="radio"></div>
863
+ <div class="option-text">
864
+ Journalist / Fact Checker
865
+ </div></label
866
+ >
867
+ </div>
868
+ <div class="option">
869
+ <label class="opt">
870
+ <input type="radio" name="q15" />
871
+ <div class="radio"></div>
872
+ <div class="option-text">Researcher / Student</div>
873
+ </label>
874
+ </div>
875
+ <div class="option">
876
+ <label class="opt">
877
+ <input class="radio" type="radio" name="q15" />
878
+ <div class="radio"></div>
879
+ <div class="option-text">Law Enforcement / OSINT</div>
880
+ </label>
881
+ </div>
882
+ <div class="option">
883
+ <label class="opt">
884
+ <input class="radio" type="radio" name="q15" />
885
+ <div class="radio"></div>
886
+ <div class="option-text">General User</div>
887
+ </label>
888
+ </div>
889
+ </div>
890
+ </div>
891
+ <div class="question" id="q16">
892
+ <label class="textarea" for="feedback-q16-comments">
893
+ <span class="textarea-label">
894
+ Help us improve. If the verification failed, what did we
895
+ miss?
896
+ </span>
897
+ </label>
898
+ <textarea
899
+ id="feedback-q16-comments"
900
+ class="feedback-textarea"
901
+ name="q16_comments"
902
+ rows="4"
903
+ placeholder="Text value"
904
+ ></textarea>
905
  </div>
906
  </div>
907
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
908
  </div>
909
  <div
910
  id="block-notification-1765336324468"
styles.css CHANGED
@@ -952,3 +952,15 @@ textarea:focus {
952
  .gap-6 {
953
  gap: 1.5rem;
954
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
952
  .gap-6 {
953
  gap: 1.5rem;
954
  }
955
+ .gap-2 {
956
+ gap: 0.5rem;
957
+ }
958
+ .pr-4 {
959
+ padding-right: 1rem;
960
+ }
961
+ .pl-4 {
962
+ padding-left: 1rem;
963
+ }
964
+ .required {
965
+ color: #de0b0b;
966
+ }