Hugging Face's logo

Spaces:
stevafernandes
/
dental-ai
Running

App Files Community
stevafernandes commited on
Commit
a9d98b3
·
verified ·
1 Parent(s): 7d9b7a1

Upload 2 files

Browse files
Files changed (2) hide show
  1. index.html +107 -2
  2. tonsillith_platform.html +107 -2
index.html CHANGED
@@ -85,6 +85,25 @@
85
  .done { text-align: center; padding: 60px 20px; }
86
  .done h2 { font-size: 22px; margin-bottom: 12px; color: #1f6f8b; }
87
  .done p { color: #555; margin-bottom: 20px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
  </style>
89
  </head>
90
  <body>
@@ -155,6 +174,17 @@
155
  </div>
156
  </div>
157
 
 
 
 
 
 
 
 
 
 
 
 
158
  <!-- DONE -->
159
  <div id="doneScreen" class="done hidden">
160
  <h2>Submitted</h2>
@@ -465,8 +495,8 @@ document.getElementById('nextBtn').onclick=()=>{
465
  clearDeleteButtons();
466
  document.getElementById('app').classList.add('hidden');
467
  stopTimer();
468
- renderTimesSummary();
469
- document.getElementById('doneScreen').classList.remove('hidden');
470
  }
471
  };
472
 
@@ -488,6 +518,7 @@ document.getElementById('startControl').onclick=()=>startGroup('Control');
488
  document.getElementById('startTest').onclick=()=>startGroup('Test');
489
  document.getElementById('restartBtn').onclick=()=>{
490
  document.getElementById('doneScreen').classList.add('hidden');
 
491
  document.getElementById('app').classList.add('hidden');
492
  document.getElementById('startScreen').classList.remove('hidden');
493
  };
@@ -499,6 +530,80 @@ window.addEventListener('resize', ()=>{
499
  let loaded=0;
500
  imgObjs.forEach(im=>{ if(im.complete) ready(); else im.onload=ready; });
501
  function ready(){ loaded++; /* nothing until a group is chosen */ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
502
  </script>
503
  </body>
504
  </html>
 
85
  .done { text-align: center; padding: 60px 20px; }
86
  .done h2 { font-size: 22px; margin-bottom: 12px; color: #1f6f8b; }
87
  .done p { color: #555; margin-bottom: 20px; }
88
+
89
+ /* survey */
90
+ .survey { max-width: 720px; margin: 0 auto; padding: 10px 4px 40px; }
91
+ .survey h2 { text-align: center; font-size: 21px; margin-bottom: 6px; }
92
+ .survey .lead { text-align: center; color: #555; margin-bottom: 22px; font-size: 14px; }
93
+ .q-block { border: 1px solid #e1e5ea; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; background: #fff; }
94
+ .q-cat { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #1f6f8b; margin-bottom: 6px; }
95
+ .q-text { font-weight: 600; margin-bottom: 12px; line-height: 1.35; }
96
+ .q-options { display: flex; flex-direction: column; gap: 8px; }
97
+ .opt {
98
+ display: flex; align-items: center; gap: 10px; padding: 9px 12px;
99
+ border: 1px solid #d4d8dd; border-radius: 8px; cursor: pointer;
100
+ font-size: 14px; transition: all .12s; user-select: none;
101
+ }
102
+ .opt:hover { border-color: #1f6f8b; background: #f6fafc; }
103
+ .opt.selected { border-color: #1f6f8b; background: #eef6fa; color: #155a73; font-weight: 600; }
104
+ .opt input { accent-color: #1f6f8b; width: 16px; height: 16px; margin: 0; }
105
+ .survey-actions { text-align: center; margin-top: 8px; }
106
+ .survey-warn { color: #c01f1f; font-size: 13px; min-height: 18px; margin-bottom: 10px; text-align: center; }
107
  </style>
108
  </head>
109
  <body>
 
174
  </div>
175
  </div>
176
 
177
+ <!-- SURVEY -->
178
+ <div id="surveyScreen" class="survey hidden">
179
+ <h2>Student survey</h2>
180
+ <div class="lead">Please answer every question by selecting one option.</div>
181
+ <div id="surveyQuestions"></div>
182
+ <div class="survey-warn" id="surveyWarn"></div>
183
+ <div class="survey-actions">
184
+ <button class="nav-btn primary" id="surveySubmitBtn" style="margin:0 auto;">Submit survey</button>
185
+ </div>
186
+ </div>
187
+
188
  <!-- DONE -->
189
  <div id="doneScreen" class="done hidden">
190
  <h2>Submitted</h2>
 
495
  clearDeleteButtons();
496
  document.getElementById('app').classList.add('hidden');
497
  stopTimer();
498
+ buildSurvey();
499
+ document.getElementById('surveyScreen').classList.remove('hidden');
500
  }
501
  };
502
 
 
518
  document.getElementById('startTest').onclick=()=>startGroup('Test');
519
  document.getElementById('restartBtn').onclick=()=>{
520
  document.getElementById('doneScreen').classList.add('hidden');
521
+ document.getElementById('surveyScreen').classList.add('hidden');
522
  document.getElementById('app').classList.add('hidden');
523
  document.getElementById('startScreen').classList.remove('hidden');
524
  };
 
530
  let loaded=0;
531
  imgObjs.forEach(im=>{ if(im.complete) ready(); else im.onload=ready; });
532
  function ready(){ loaded++; /* nothing until a group is chosen */ }
533
+
534
+ /* ---------------- Student survey ---------------- */
535
+ const LIKERT = ['Strongly disagree','Disagree','Neutral','Agree','Strongly agree'];
536
+ const SURVEY_QUESTIONS = [
537
+ { cat:'Perceived Helpfulness of AI in Detecting Tonsilloliths',
538
+ text:'1. The AI markings made it easier to recognize tonsilloliths.',
539
+ options: LIKERT },
540
+ { cat:'Efficiency and Learning Support',
541
+ text:'2. The AI tool helped me detect tonsilloliths more quickly.',
542
+ options: LIKERT },
543
+ { cat:'Trust and Reliability',
544
+ text:'3. I felt comfortable relying on AI assistance during image interpretation.',
545
+ options: LIKERT },
546
+ { cat:'Educational Value',
547
+ text:'4. The AI tool enhanced my overall learning experience in this exercise.',
548
+ options: LIKERT },
549
+ { cat:'Overall Helpfulness (Single-choice)',
550
+ text:'5. Overall, how helpful was the AI tool in detecting tonsilloliths?',
551
+ options: ['Not helpful','Slightly helpful','Moderately helpful','Very helpful','Extremely helpful'] },
552
+ ];
553
+ // answers per group: { Control:[...], Test:[...] }
554
+ const surveyAnswers = { Control: null, Test: null };
555
+ let currentSurvey = [];
556
+
557
+ function buildSurvey(){
558
+ currentSurvey = new Array(SURVEY_QUESTIONS.length).fill(null);
559
+ document.getElementById('surveyWarn').textContent = '';
560
+ const wrap = document.getElementById('surveyQuestions');
561
+ wrap.innerHTML = '';
562
+ SURVEY_QUESTIONS.forEach((q, qi)=>{
563
+ const block = document.createElement('div');
564
+ block.className = 'q-block';
565
+ const cat = document.createElement('div');
566
+ cat.className = 'q-cat'; cat.textContent = q.cat;
567
+ const txt = document.createElement('div');
568
+ txt.className = 'q-text'; txt.textContent = q.text;
569
+ const opts = document.createElement('div');
570
+ opts.className = 'q-options';
571
+ q.options.forEach((label, oi)=>{
572
+ const lab = document.createElement('label');
573
+ lab.className = 'opt';
574
+ const input = document.createElement('input');
575
+ input.type = 'radio';
576
+ input.name = 'q'+qi;
577
+ input.value = oi;
578
+ input.addEventListener('change', ()=>{
579
+ currentSurvey[qi] = label;
580
+ opts.querySelectorAll('.opt').forEach(o=>o.classList.remove('selected'));
581
+ lab.classList.add('selected');
582
+ });
583
+ const span = document.createElement('span');
584
+ span.textContent = label;
585
+ lab.appendChild(input);
586
+ lab.appendChild(span);
587
+ opts.appendChild(lab);
588
+ });
589
+ block.appendChild(cat);
590
+ block.appendChild(txt);
591
+ block.appendChild(opts);
592
+ wrap.appendChild(block);
593
+ });
594
+ }
595
+
596
+ document.getElementById('surveySubmitBtn').onclick = ()=>{
597
+ const missing = currentSurvey.findIndex(a => a === null);
598
+ if(missing !== -1){
599
+ document.getElementById('surveyWarn').textContent = 'Please answer question ' + (missing+1) + ' before submitting.';
600
+ return;
601
+ }
602
+ surveyAnswers[groupMode] = currentSurvey.slice();
603
+ document.getElementById('surveyScreen').classList.add('hidden');
604
+ renderTimesSummary();
605
+ document.getElementById('doneScreen').classList.remove('hidden');
606
+ };
607
  </script>
608
  </body>
609
  </html>
tonsillith_platform.html CHANGED
@@ -85,6 +85,25 @@
85
  .done { text-align: center; padding: 60px 20px; }
86
  .done h2 { font-size: 22px; margin-bottom: 12px; color: #1f6f8b; }
87
  .done p { color: #555; margin-bottom: 20px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
  </style>
89
  </head>
90
  <body>
@@ -155,6 +174,17 @@
155
  </div>
156
  </div>
157
 
 
 
 
 
 
 
 
 
 
 
 
158
  <!-- DONE -->
159
  <div id="doneScreen" class="done hidden">
160
  <h2>Submitted</h2>
@@ -465,8 +495,8 @@ document.getElementById('nextBtn').onclick=()=>{
465
  clearDeleteButtons();
466
  document.getElementById('app').classList.add('hidden');
467
  stopTimer();
468
- renderTimesSummary();
469
- document.getElementById('doneScreen').classList.remove('hidden');
470
  }
471
  };
472
 
@@ -488,6 +518,7 @@ document.getElementById('startControl').onclick=()=>startGroup('Control');
488
  document.getElementById('startTest').onclick=()=>startGroup('Test');
489
  document.getElementById('restartBtn').onclick=()=>{
490
  document.getElementById('doneScreen').classList.add('hidden');
 
491
  document.getElementById('app').classList.add('hidden');
492
  document.getElementById('startScreen').classList.remove('hidden');
493
  };
@@ -499,6 +530,80 @@ window.addEventListener('resize', ()=>{
499
  let loaded=0;
500
  imgObjs.forEach(im=>{ if(im.complete) ready(); else im.onload=ready; });
501
  function ready(){ loaded++; /* nothing until a group is chosen */ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
502
  </script>
503
  </body>
504
  </html>
 
85
  .done { text-align: center; padding: 60px 20px; }
86
  .done h2 { font-size: 22px; margin-bottom: 12px; color: #1f6f8b; }
87
  .done p { color: #555; margin-bottom: 20px; }
88
+
89
+ /* survey */
90
+ .survey { max-width: 720px; margin: 0 auto; padding: 10px 4px 40px; }
91
+ .survey h2 { text-align: center; font-size: 21px; margin-bottom: 6px; }
92
+ .survey .lead { text-align: center; color: #555; margin-bottom: 22px; font-size: 14px; }
93
+ .q-block { border: 1px solid #e1e5ea; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; background: #fff; }
94
+ .q-cat { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #1f6f8b; margin-bottom: 6px; }
95
+ .q-text { font-weight: 600; margin-bottom: 12px; line-height: 1.35; }
96
+ .q-options { display: flex; flex-direction: column; gap: 8px; }
97
+ .opt {
98
+ display: flex; align-items: center; gap: 10px; padding: 9px 12px;
99
+ border: 1px solid #d4d8dd; border-radius: 8px; cursor: pointer;
100
+ font-size: 14px; transition: all .12s; user-select: none;
101
+ }
102
+ .opt:hover { border-color: #1f6f8b; background: #f6fafc; }
103
+ .opt.selected { border-color: #1f6f8b; background: #eef6fa; color: #155a73; font-weight: 600; }
104
+ .opt input { accent-color: #1f6f8b; width: 16px; height: 16px; margin: 0; }
105
+ .survey-actions { text-align: center; margin-top: 8px; }
106
+ .survey-warn { color: #c01f1f; font-size: 13px; min-height: 18px; margin-bottom: 10px; text-align: center; }
107
  </style>
108
  </head>
109
  <body>
 
174
  </div>
175
  </div>
176
 
177
+ <!-- SURVEY -->
178
+ <div id="surveyScreen" class="survey hidden">
179
+ <h2>Student survey</h2>
180
+ <div class="lead">Please answer every question by selecting one option.</div>
181
+ <div id="surveyQuestions"></div>
182
+ <div class="survey-warn" id="surveyWarn"></div>
183
+ <div class="survey-actions">
184
+ <button class="nav-btn primary" id="surveySubmitBtn" style="margin:0 auto;">Submit survey</button>
185
+ </div>
186
+ </div>
187
+
188
  <!-- DONE -->
189
  <div id="doneScreen" class="done hidden">
190
  <h2>Submitted</h2>
 
495
  clearDeleteButtons();
496
  document.getElementById('app').classList.add('hidden');
497
  stopTimer();
498
+ buildSurvey();
499
+ document.getElementById('surveyScreen').classList.remove('hidden');
500
  }
501
  };
502
 
 
518
  document.getElementById('startTest').onclick=()=>startGroup('Test');
519
  document.getElementById('restartBtn').onclick=()=>{
520
  document.getElementById('doneScreen').classList.add('hidden');
521
+ document.getElementById('surveyScreen').classList.add('hidden');
522
  document.getElementById('app').classList.add('hidden');
523
  document.getElementById('startScreen').classList.remove('hidden');
524
  };
 
530
  let loaded=0;
531
  imgObjs.forEach(im=>{ if(im.complete) ready(); else im.onload=ready; });
532
  function ready(){ loaded++; /* nothing until a group is chosen */ }
533
+
534
+ /* ---------------- Student survey ---------------- */
535
+ const LIKERT = ['Strongly disagree','Disagree','Neutral','Agree','Strongly agree'];
536
+ const SURVEY_QUESTIONS = [
537
+ { cat:'Perceived Helpfulness of AI in Detecting Tonsilloliths',
538
+ text:'1. The AI markings made it easier to recognize tonsilloliths.',
539
+ options: LIKERT },
540
+ { cat:'Efficiency and Learning Support',
541
+ text:'2. The AI tool helped me detect tonsilloliths more quickly.',
542
+ options: LIKERT },
543
+ { cat:'Trust and Reliability',
544
+ text:'3. I felt comfortable relying on AI assistance during image interpretation.',
545
+ options: LIKERT },
546
+ { cat:'Educational Value',
547
+ text:'4. The AI tool enhanced my overall learning experience in this exercise.',
548
+ options: LIKERT },
549
+ { cat:'Overall Helpfulness (Single-choice)',
550
+ text:'5. Overall, how helpful was the AI tool in detecting tonsilloliths?',
551
+ options: ['Not helpful','Slightly helpful','Moderately helpful','Very helpful','Extremely helpful'] },
552
+ ];
553
+ // answers per group: { Control:[...], Test:[...] }
554
+ const surveyAnswers = { Control: null, Test: null };
555
+ let currentSurvey = [];
556
+
557
+ function buildSurvey(){
558
+ currentSurvey = new Array(SURVEY_QUESTIONS.length).fill(null);
559
+ document.getElementById('surveyWarn').textContent = '';
560
+ const wrap = document.getElementById('surveyQuestions');
561
+ wrap.innerHTML = '';
562
+ SURVEY_QUESTIONS.forEach((q, qi)=>{
563
+ const block = document.createElement('div');
564
+ block.className = 'q-block';
565
+ const cat = document.createElement('div');
566
+ cat.className = 'q-cat'; cat.textContent = q.cat;
567
+ const txt = document.createElement('div');
568
+ txt.className = 'q-text'; txt.textContent = q.text;
569
+ const opts = document.createElement('div');
570
+ opts.className = 'q-options';
571
+ q.options.forEach((label, oi)=>{
572
+ const lab = document.createElement('label');
573
+ lab.className = 'opt';
574
+ const input = document.createElement('input');
575
+ input.type = 'radio';
576
+ input.name = 'q'+qi;
577
+ input.value = oi;
578
+ input.addEventListener('change', ()=>{
579
+ currentSurvey[qi] = label;
580
+ opts.querySelectorAll('.opt').forEach(o=>o.classList.remove('selected'));
581
+ lab.classList.add('selected');
582
+ });
583
+ const span = document.createElement('span');
584
+ span.textContent = label;
585
+ lab.appendChild(input);
586
+ lab.appendChild(span);
587
+ opts.appendChild(lab);
588
+ });
589
+ block.appendChild(cat);
590
+ block.appendChild(txt);
591
+ block.appendChild(opts);
592
+ wrap.appendChild(block);
593
+ });
594
+ }
595
+
596
+ document.getElementById('surveySubmitBtn').onclick = ()=>{
597
+ const missing = currentSurvey.findIndex(a => a === null);
598
+ if(missing !== -1){
599
+ document.getElementById('surveyWarn').textContent = 'Please answer question ' + (missing+1) + ' before submitting.';
600
+ return;
601
+ }
602
+ surveyAnswers[groupMode] = currentSurvey.slice();
603
+ document.getElementById('surveyScreen').classList.add('hidden');
604
+ renderTimesSummary();
605
+ document.getElementById('doneScreen').classList.remove('hidden');
606
+ };
607
  </script>
608
  </body>
609
  </html>