Skip to content

Add Post-Task Reflection and Study Debrief screens #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hashexplaindata merged 1 commit into from
Mar 13, 2026
Merged

Add Post-Task Reflection and Study Debrief screens #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions code/experiment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ const STATE = {
isTrialActive: false,
justification: "",
activeScreen: null,
pendingTransitionTimer: null
pendingTransitionTimer: null,
manipulation_noticed: null
};

// Persist PID to localStorage
Expand Down Expand Up @@ -379,8 +380,27 @@ function init() {
DOM.btnFinalize.addEventListener('click', () => {
DOM.btnFinalize.disabled = true;
STATE.justification = DOM.textareaJustification.value.trim();
showScreen('manipulation');
});

// Route: Manipulation Check -> Debrief
document.querySelectorAll('.btn-manipulation').forEach(btn => {
btn.addEventListener('click', (e) => {
STATE.manipulation_noticed = parseInt(e.target.dataset.val);
Copy link

@gemini-code-assist gemini-code-assist bot Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

It is a best practice to always specify the radix (the base in mathematical numeral systems) when using parseInt to prevent unexpected behavior and ensure clarity. For parsing a decimal number, please add 10 as the second argument.

Suggested change
STATE.manipulation_noticed = parseInt(e.target.dataset.val);
STATE.manipulation_noticed = parseInt(e.target.dataset.val, 10);


Comment on lines +388 to +390
// Append this crucial metric to every trial row before sending
STATE.results.forEach(row => {
row.manipulation_noticed = STATE.manipulation_noticed;
});
Comment on lines +391 to +394
Copy link

@gemini-code-assist gemini-code-assist bot Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For better code organization, the logic to append manipulation_noticed to each result should be moved into the executeBatchPayload function. This would consolidate all final data enrichment in one place, as is already done for semantic_justification. Please remove this loop and add row.manipulation_noticed = STATE.manipulation_noticed; inside the forEach loop in executeBatchPayload.

Comment on lines +391 to +394
Copy link
Owner Author

@hashexplaindata hashexplaindata Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot apply changes based on this feedback


showScreen('debrief');
});
});

// Route: Debrief -> Outro & Payload Execution
document.getElementById('btn-submit-final').addEventListener('click', () => {
showScreen(10);
executeBatchPayload();
executeBatchPayload(); // The data is securely transmitted ONLY after full informed consent is achieved
});
}

Expand Down
23 changes: 23 additions & 0 deletions code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,29 @@ <h2>Strategic Rationalization</h2>
</div>
</div>

<div id="screen-manipulation" class="screen hidden">
<div class="card">
<h2 style="margin-bottom: 10px;">Post-Task Reflection</h2>
<p style="color: var(--text-secondary); margin-bottom: 25px;">During the UI evaluation, did you notice any specific labels, badges, or recommendations attached to the design options?</p>
<div style="display: flex; flex-direction: column; gap: 10px;">
<button class="btn-primary btn-manipulation" data-val="1">Yes, I noticed an "AI Recommended" badge</button>
<button class="btn-primary btn-manipulation" data-val="2">I noticed other text/labels (e.g., "Open for Fall")</button>
<button class="btn-primary btn-manipulation" data-val="0">No, I did not notice any specific badges</button>
Comment on lines +115 to +122
</div>
</div>
</div>

<div id="screen-debrief" class="screen hidden">
<div class="card" style="text-align: left;">
<h2 style="margin-bottom: 15px;">Study Debriefing</h2>
<p style="margin-bottom: 10px;"><strong>Thank you for your participation.</strong></p>
<p style="margin-bottom: 10px; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary);">The true purpose of this study was not to test beta UI designs for a university portal. We are investigating <em>informational influence</em>—specifically, whether the presence of an "AI Recommended" badge alters human decision-making and cognitive processing time when faced with ambiguous choices.</p>
<p style="margin-bottom: 10px; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary);">Because knowing this beforehand would have changed your natural behavior, we could not disclose it until now. Your data remains completely anonymous and will be used strictly for academic research.</p>
<p style="margin-bottom: 20px; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary);">If you consent to submit your data now that you know the true purpose, please click "Submit & Finish" below. If you wish to withdraw, you may simply close this tab.</p>
<button id="btn-submit-final" class="btn-primary" style="width: 100%;">Submit & Finish</button>
Comment on lines +128 to +134
</div>
</div>
Comment on lines +115 to +136
Copy link

@gemini-code-assist gemini-code-assist bot Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The newly added screens screen-manipulation and screen-debrief use a significant amount of inline styling. This is inconsistent with other static screens in this file (e.g., screen-9) which use CSS classes for styling. To improve maintainability, consistency, and separation of concerns, please move these inline styles to the style.css file and apply them via CSS classes.


<!-- ====== SCREEN 10: THE OUTRO ====== -->
<div id="screen-10" class="screen">
<div class="bento-container">
Expand Down
Loading