Skip to content

Fix/refactoring #221

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
Alina086 merged 2 commits into from
Jun 16, 2025
Merged

Fix/refactoring #221

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
15d9342
In process of refactoring studypage related code
Alina086 Jun 16, 2025
516453d
Refactored duplicate study page code to be cleaner.
Alina086 Jun 16, 2025
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
239 changes: 73 additions & 166 deletions frontend/src/editor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,25 +114,40 @@ function EditorScreen() {
}

const studyPageNames = [
'study-introSurvey',
'study-intro',
'study-introSurvey',
'study-task1',
'study-posttask1',
'study-postTask1',
'study-task2',
'study-posttask2',
'study-postTask2',
'study-task3',
'study-posttask3',
'study-postTask3',
'study-final'
];

const SURVEY_URLS = {
preStudy: 'https://calvin.co1.qualtrics.com/jfe/form/SV_eM6R5Yw7nnJ3jh4', // Pre-study survey
preStudy: 'https://calvin.co1.qualtrics.com/jfe/form/SV_eM6R5Yw7nnJ3jh4',
postTask1: 'https://calvin.co1.qualtrics.com/jfe/form/SV_6Vuc9vgqMuEqzVY',
postTask2: 'https://calvin.co1.qualtrics.com/jfe/form/SV_7X8tAiech6zP79A',
postTask3: 'https://calvin.co1.qualtrics.com/jfe/form/SV_1M8MN5b0H9pfYsm',
final: 'https://calvin.co1.qualtrics.com/jfe/form/SV_79DIQlYz4SJCwnk'
};

const taskConfigs = {
'1': {
condition: 'Completion',
taskDescription: 'Task 1: Should companies adopt a four-day work week (working Monday through Thursday) instead of the traditional five-day schedule? Consider impacts on productivity, employee well-being, and business operations.',
},
'2': {
condition: 'Question',
taskDescription: 'Task 2: Write a cover letter for the position described. The applicant is a recent college graduate with a major in Environmental Sustainability and a minor in Marketing, with relevant internship experience. Demonstrate how their background aligns with the company’s mission and requirements. [Details are given below in the editor document]',
},
'3': {
condition: 'RMove',
taskDescription: 'Task 3: After reading these paragraphs, write a summary that explains CRISPR gene editing to your 11th grade biology classmates. Your goal is to help them understand what CRISPR is, how it works, and why it matters, using language and examples they would find clear and engaging.',
},
};

function Router({
page
}: {
Expand All @@ -148,22 +163,23 @@ function Router({
return <EditorScreen />;
}
else if (page.startsWith('study')) {

getDefaultStore().set(pageNameAtom, PageName.Study);
getDefaultStore().set(overallModeAtom, OverallMode.study);

const urlParams = new URLSearchParams(window.location.search);
const username = urlParams.get('username');
if (!username) {
return <div> Please provide an username in the URL parameter. </div>;
return <div> Please provide a username in the URL parameter. </div>;
}

getDefaultStore().set(pageNameAtom, PageName.Study);
getDefaultStore().set(overallModeAtom, OverallMode.study);

const studyPageIndex = studyPageNames.indexOf(page);
if (studyPageIndex === -1) {
return <div>Unknown study page</div>;
}
//const nextPage = studyPageNames[studyPageIndex + 1] || 'study-intro';

const nextPage = studyPageNames[studyPageIndex + 1] || 'study-intro';

if (page === 'study-intro') {
// TODO: consent form
return <div className={classes.studyIntroContainer}>
Expand All @@ -182,7 +198,7 @@ function Router({
event: 'StartStudy',
interaction: 'User clicked Start Study button'
});
urlParams.set('page', 'study-introSurvey')
urlParams.set('page', nextPage)
window.location.search = urlParams.toString()
; }}
className={classes.startButton}
Expand All @@ -194,22 +210,19 @@ function Router({
}
if (page === 'study-introSurvey') {
const nextUrlParams = new URLSearchParams(window.location.search);
nextUrlParams.set('page', 'study-task1');
const redirectURL = encodeURIComponent(window.location.origin + `/editor.html?${nextUrlParams.toString()}`);

//const redirectURL = encodeURIComponent(window.location.origin + `/editor.html?page=study-task1`);
const introSurveyURL = 'https://calvin.co1.qualtrics.com/jfe/form/SV_eM6R5Yw7nnJ3jh4';
nextUrlParams.set('page', nextPage);
const redirectURL = encodeURIComponent(window.location.origin + `/editor.html?${nextUrlParams.toString()}`);
const introSurveyURL = SURVEY_URLS.preStudy;

return (
<div className={classes.studyIntroContainer}>
<a
<a
onClick={() => {
log ({
username: username,
event: 'StartIntroSurvey',
interaction: 'User clicked Intro Survey button'
});
urlParams.set('page', 'study-task1')
window.location.search = urlParams.toString()
; }}
href={`${introSurveyURL}?redirect_url=${redirectURL}`}
className={classes.startButton}
Expand All @@ -219,169 +232,63 @@ function Router({
</div>
);
}

else if (page === 'study-task1') {
const nextUrlParams = new URLSearchParams(window.location.search);
nextUrlParams.set('page', 'study-posttask1');

const condition = 'Completion'; // This would be dynamically set based on the study task
getDefaultStore().set(studyConditionAtom, condition);
const taskDescription = 'Task 1: Should companies adopt a four-day work week (working Monday through Thursday) instead of the traditional five-day schedule? Consider impacts on productivity, employee well-being, and business operations.';
getDefaultStore().set(taskDescriptionAtom, taskDescription);

return <div>
<div className={classes.studytaskcontainer}> {taskDescription} </div>
else if (page.startsWith('study-task')){
const urlParams = new URLSearchParams(window.location.search);

<EditorScreen />

<button
onClick={() => {
log ({
username: username,
event: 'FinishTask1',
interaction: 'User finished Task 1'
});
urlParams.set('page', 'study-posttask1')
window.location.search = urlParams.toString()
; }}
className={classes.doneButton}> Save and Continue
</button>
</div>;
}
else if (page === 'study-posttask1') {
const nextUrlParams = new URLSearchParams(window.location.search);
nextUrlParams.set('page', 'study-task2');
const redirectURL = encodeURIComponent(window.location.origin + `/editor.html?${nextUrlParams.toString()}`);

return <div className={classes.studyIntroContainer}>
<p> Thank you for completing Task 1. Please take a moment to complete a brief survey.</p>
<button
onClick={() => {
log ({
username: username,
event: 'StartPostTask1',
interaction: 'User started post task 1 survey'
});
urlParams.set('page', 'study-task2')
window.location.search = urlParams.toString()
;
//const redirectURL = encodeURIComponent(window.location.origin + `/editor.html?page=study-task2`);
window.location.href = `${SURVEY_URLS.postTask1}?redirect_url=${redirectURL}`;
}}
className={classes.startButton}
>
Take Survey
</button>
</div>;
const taskNumber = page.replace('study-task', '');
const taskConfig = taskConfigs[taskNumber as keyof typeof taskConfigs];
if (!taskConfig) {
return <div>Invalid task number</div>;
}
else if (page === 'study-task2') {
const nextUrlParams = new URLSearchParams(window.location.search);
nextUrlParams.set('page', 'study-posttask2');

const condition = 'Question' // This would be dynamically set based on the study task
getDefaultStore().set(studyConditionAtom, condition);
const taskDescription = 'Task 2: Write a cover letter for the position described. The applicant is a recent college graduate with a major in Environmental Sustainability and a minor in Marketing, with relevant internship experience. Demonstrate how their background aligns with the company’s mission and requirements. [Details are given below in the editor document]';
getDefaultStore().set(taskDescriptionAtom, taskDescription);
getDefaultStore().set(studyConditionAtom, taskConfig.condition);
getDefaultStore().set(taskDescriptionAtom, taskConfig.taskDescription);

return <div>
<div className={classes.studytaskcontainer}> {taskDescription} </div>

<EditorScreen />

<button
onClick={() => {
log ({
username: username,
event: 'FinishTask2',
interaction: 'User finished Task 2'
});
urlParams.set('page', 'study-posttask2')
window.location.search = urlParams.toString()
; }}
className={classes.doneButton}> Save and Continue
</button>

</div>;
}
else if (page === 'study-posttask2') {
const nextUrlParams = new URLSearchParams(window.location.search);
nextUrlParams.set('page', 'study-task3');
const redirectURL = encodeURIComponent(window.location.origin + `/editor.html?${nextUrlParams.toString()}`);

return <div className={classes.studyIntroContainer}>
<p> Thank you for completing Task 2. Please take a moment to complete a brief survey.</p>
<button
onClick={() => {
log ({
username: username,
event: 'StartPostTask2',
interaction: 'User started post task 2 survey'
});
urlParams.set('page', 'study-task3')
window.location.search = urlParams.toString()
;
//const redirectURL = encodeURIComponent(window.location.origin + `/editor.html?page=study-task2`);
window.location.href = `${SURVEY_URLS.postTask2}?redirect_url=${redirectURL}`;
}}
className={classes.startButton}
>
Take Survey
</button>
</div>;
}
else if (page === 'study-task3') {
const nextUrlParams = new URLSearchParams(window.location.search);
nextUrlParams.set('page', 'study-posttask3');

const condition = 'RMove' // This would be dynamically set based on the study task
getDefaultStore().set(studyConditionAtom, condition);
const taskDescription = 'Task 3: After reading these paragraphs, write a summary that explains CRISPR gene editing to your 11th grade biology classmates. Your goal is to help them understand what CRISPR is, how it works, and why it matters, using language and examples they would find clear and engaging.';
getDefaultStore().set(taskDescriptionAtom, taskDescription);

return <div>
<div className={classes.studytaskcontainer}> {taskDescription} </div>

<EditorScreen />
return (
<div>
<div className={classes.studytaskcontainer}>{taskConfig.taskDescription}</div>

<button
onClick={() => {
log ({
username: username,
event: 'FinishTask3',
interaction: 'User finished Task 3'
});
urlParams.set('page', 'study-posttask3')
window.location.search = urlParams.toString()
; }}
className={classes.doneButton}> Save and Continue
</button>
<EditorScreen />

</div>;
<button
onClick={() => {
log({
username: username,
event: `FinishTask${taskNumber}`,
interaction: `User finished Task ${taskNumber}`
});
urlParams.set('page', nextPage);
window.location.search = urlParams.toString();
}}
className={classes.doneButton}
>
Save and Continue
</button>
</div>
);
}
else if (page === 'study-posttask3') {
else if (page.startsWith('study-postTask')) {
const nextUrlParams = new URLSearchParams(window.location.search);
nextUrlParams.set('page', 'study-final');
const redirectURL = encodeURIComponent(window.location.origin + `/editor.html?${nextUrlParams.toString()}`);
nextUrlParams.set('page', nextPage);
const redirectURL = encodeURIComponent(window.location.origin + `/editor.html?${nextUrlParams.toString()}`);
const postTaskNumber = page.replace('study-postTask', '');
const postTaskSurveyURL = SURVEY_URLS[`postTask${postTaskNumber}` as keyof typeof SURVEY_URLS];

return <div className={classes.studyIntroContainer}>
<p> Thank you for completing Task 3. Please take a moment to complete a brief survey.</p>
<button
<p> Thank you for completing Task {postTaskNumber}. Please take a moment to complete a brief survey.</p>
<a
onClick={() => {
log ({
username: username,
event: 'StartPostTask3',
interaction: 'User started post task 3 survey'
event: `StartPostTask${postTaskNumber}`,
interaction: `User started post task ${postTaskNumber} survey`
});
urlParams.set('page', 'study-final')
window.location.search = urlParams.toString()
;
//const redirectURL = encodeURIComponent(window.location.origin + `/editor.html?page=study-task2`);
window.location.href = `${SURVEY_URLS.postTask3}?redirect_url=${redirectURL}`;
}}
href={`${postTaskSurveyURL}?redirect_url=${redirectURL}`}
className={classes.startButton}
>
Take Survey
</button>
</a>
</div>;
}
else if (page === 'study-final') {
Expand Down
Loading