Skip to content
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

Completion duration updates #3777

Merged
merged 6 commits into from
Oct 28, 2022
Merged

Completion duration updates #3777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b61e1d3
Update h5p and html model and threshold conditions
marcellamaki Oct 24, 2022
f9c31aa
Updates to completion duration criteria to ensure data persistence. D…
marcellamaki Oct 27, 2022
29de82b
Remove required duration from exercises. Fix display of practice quizzes
marcellamaki Oct 27, 2022
61d2ea7
Update tests
marcellamaki Oct 27, 2022
0071088
Code cleanup and revert some (mistaken) changes
marcellamaki Oct 27, 2022
14c076d
Properly handle input from minutes, rather than setting default
marcellamaki Oct 27, 2022
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
13 changes: 8 additions & 5 deletions contentcuration/contentcuration/frontend/channelEdit/components/edit/ActivityDuration.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
:items="availableNumbers"
:menu-props="menuProps"
:attach="attach"
:rules="minutesRules"
/>
</template>
</DropdownWrapper>
Expand Down Expand Up @@ -102,10 +103,7 @@
if (this.audioVideoUpload) {
return false;
}
return (
this.selectedDuration !== DurationDropdownMap.EXACT_TIME &&
this.selectedCompletion === CompletionDropdownMap.completeDuration
);
return this.selectedCompletion === CompletionDropdownMap.completeDuration;
},
showOptionalLabel() {
return this.selectedDuration !== DurationDropdownMap.EXACT_TIME;
Expand Down Expand Up @@ -153,8 +151,13 @@
return getShortActivityDurationValidators().map(translateValidator);
} else if (this.selectedDuration === DurationDropdownMap.LONG_ACTIVITY) {
return getLongActivityDurationValidators().map(translateValidator);
} else if (
this.selectedDuration === DurationDropdownMap.EXACT_TIME &&
this.selectedCompletion === CompletionDropdownMap.completeDuration
) {
return getActivityDurationValidators().map(translateValidator);
}
return getActivityDurationValidators().map(translateValidator);
return [];
},
},
created() {
Expand Down
99 changes: 57 additions & 42 deletions contentcuration/contentcuration/frontend/channelEdit/components/edit/CompletionOptions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,15 +175,9 @@
hideDurationDropdown() {
// named "hide" instead of "show" because "show" is the default behavior
if (this.value) {
if (this.kind === ContentKindsNames.H5P) {
return true;
}
return (
this.currentCompletionDropdown === CompletionDropdownMap.reference ||
(this.value.model === CompletionCriteriaModels.REFERENCE &&
!this.currentCompletionDropdown) ||
//should be hidden if model is reference and we're getting this from the BE
this.currentCompletionDropdown === CompletionDropdownMap.determinedByResource
this.value.model == CompletionCriteriaModels.REFERENCE ||
this.value.model == CompletionCriteriaModels.DETERMINED_BY_RESOURCE
);
}
return false;
Expand Down Expand Up @@ -221,22 +215,15 @@
- Long activity, short activity, or exact time are chosen in HTML5
*/
if (this.value) {
const switchingFromReferenceBetweenAllContentViewedAndCompleteDuration =
this.value.suggested_duration === null || this.value.suggested_duration_type === null;
if (
this.value.model == CompletionCriteriaModels.REFERENCE ||
this.value.model == CompletionCriteriaModels.DETERMINED_BY_RESOURCE
) {
return false;
}

if (!this.audioVideoResource) {
if (this.kind === ContentKindsNames.HTML5 || this.kind === ContentKindsNames.H5P) {
if (this.value.model !== CompletionCriteriaModels.REFERENCE) {
if (!this.currentCompletionDropdown) {
return true;
}
return this.currentCompletionDropdown === CompletionDropdownMap.completeDuration;
}
}
return !(
this.value.model === CompletionCriteriaModels.REFERENCE ||
switchingFromReferenceBetweenAllContentViewedAndCompleteDuration
);
return true;
}
}
return this.audioVideoResource && this.value.model !== CompletionCriteriaModels.REFERENCE;
Expand All @@ -250,6 +237,10 @@
return CompletionDropdownMap.completeDuration;
}

if (this.value.model === CompletionCriteriaModels.REFERENCE) {
return CompletionDropdownMap.reference;
}

if (this.kind === ContentKindsNames.DOCUMENT) {
if (!this.value['model']) {
return CompletionDropdownMap.allContent;
Expand All @@ -268,11 +259,13 @@
if (
!this.value['model'] ||
this.value.model === CompletionCriteriaModels.APPROX_TIME ||
this.value.model === CompletionCriteriaModels.TIME ||
this.value.model === CompletionCriteriaModels.REFERENCE
this.value.model === CompletionCriteriaModels.TIME
) {
return CompletionDropdownMap.completeDuration;
} else if (this.value.model === CompletionCriteriaModels.REFERENCE) {
return CompletionDropdownMap.reference;
}

return CompletionDropdownMap.determinedByResource;
}

Expand All @@ -287,8 +280,7 @@
}

if (this.kind === ContentKindsNames.EXERCISE) {
// if the practice quiz flag is set, return "practice quiz"
if (this.practiceQuizzesAllowed && this.value.modality === ContentModalities.QUIZ) {
if (this.value.modality === ContentModalities.QUIZ) {
return CompletionDropdownMap.practiceQuiz;
}
return CompletionDropdownMap.goal;
Expand All @@ -308,6 +300,12 @@
threshold: null,
};
}
if (value === CompletionDropdownMap.completeDuration) {
update.completion_criteria = {
model: CompletionCriteriaModels.TIME,
threshold: this.fileDuration || this.value.suggested_duration,
};
}

// FOR DOCUMENTS
if (this.kind === ContentKindsNames.DOCUMENT) {
Expand All @@ -324,6 +322,13 @@
model: CompletionCriteriaModels.REFERENCE,
threshold: null,
};
} else if (value === CompletionDropdownMap.completeDuration) {
// set to '1' as the minimum here, due to validation rules requiring > 0
Copy link
Member

Choose a reason for hiding this comment

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

Not sure I understand why we're setting a default here - feels like if there is no value, we need to let the user set it.

update.suggested_duration = this.value.suggested_duration || 60;
update.completion_criteria = {
model: CompletionCriteriaModels.TIME,
threshold: this.value.suggested_duration || 60,
};
} else {
update.suggested_duration_type = this.value.suggested_duration_type;
update.suggested_duration = this.value.suggested_duration;
Expand Down Expand Up @@ -357,6 +362,12 @@
model: CompletionCriteriaModels.DETERMINED_BY_RESOURCE,
threshold: null,
};
} else if (value === CompletionDropdownMap.completeDuration) {
update.suggested_duration = this.value.suggested_duration || 60;
update.completion_criteria = {
model: CompletionCriteriaModels.TIME,
threshold: this.value.suggested_duration || 60,
};
}
}

Expand All @@ -365,8 +376,8 @@
if (value === CompletionDropdownMap.practiceQuiz) {
update.modality = ContentModalities.QUIZ;
update.completion_criteria = {
model: this.value.model,
threshold: this.value.threshold,
model: this.value.model || CompletionCriteriaModels.MASTERY,
threshold: this.value.threshold || { mastery_model: MasteryModelsNames.DO_ALL },
};
} else {
update.modality = null;
Expand Down Expand Up @@ -572,7 +583,10 @@
) {
if (duration === DurationDropdownMap.EXACT_TIME) {
update.suggested_duration_type = SuggestedDurationTypesMap.TIME;
update.suggested_duration = this.value.suggested_duration || 60;
update.suggested_duration = this.handleMinutesInputFromActivityDuration(
this.value.suggested_duration,
duration
);
}
if (duration === DurationDropdownMap.SHORT_ACTIVITY) {
update.suggested_duration_type = SuggestedDurationTypesMap.APPROX_TIME;
Expand Down Expand Up @@ -623,7 +637,10 @@
}
if (duration === DurationDropdownMap.EXACT_TIME) {
update.suggested_duration_type = SuggestedDurationTypesMap.TIME;
update.suggested_duration = this.value.suggested_duration || 60;
update.suggested_duration = this.handleMinutesInputFromActivityDuration(
this.value.suggested_duration,
duration
);
update.completion_criteria = {
model: CompletionCriteriaModels.TIME,
threshold: update.suggested_duration,
Expand Down Expand Up @@ -657,7 +674,10 @@
}
if (duration === DurationDropdownMap.EXACT_TIME) {
update.suggested_duration_type = SuggestedDurationTypesMap.TIME;
update.suggested_duration = this.value.suggested_duration || 60;
update.suggested_duration = this.handleMinutesInputFromActivityDuration(
this.value.suggested_duration,
duration
);
update.completion_criteria = {
model: this.value.model,
threshold: this.value.threshold,
Expand Down Expand Up @@ -776,18 +796,13 @@
return false;
},
durationRules() {
const defaultStateForDocument = this.currentCompletionDropdown === null;
if (this.value) {
const allContentViewedIsChosenInCompletionDropdown =
this.currentCompletionDropdown === CompletionDropdownMap.allContent ||
(this.value.model === CompletionCriteriaModels.PAGES &&
this.currentCompletionDropdown === CompletionDropdownMap.allContent);

if (defaultStateForDocument || allContentViewedIsChosenInCompletionDropdown) {
return [];
}
if (
this.currentCompletionDropdown === CompletionDropdownMap.completeDuration ||
this.completionDropdown === CompletionDropdownMap.completeDuration
) {
return getDurationValidators().map(translateValidator);
}
return getDurationValidators().map(translateValidator);
return [];
},
},
methods: {
Expand Down
72 changes: 17 additions & 55 deletions .../contentcuration/frontend/channelEdit/components/edit/__tests__/completionOptions.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,23 +83,23 @@ describe('CompletionOptions', () => {
});
expect(wrapper.vm.completionDropdown).toBe('allContent');
});
it(`'All content viewed' should be displayed if the model in the backend is 'reference'`, () => {
it(`'All content viewed' should be displayed if the model in the backend is 'pages'`, () => {
const wrapper = mount(CompletionOptions, {
propsData: {
kind: 'document',
value: { model: 'reference' },
value: { model: 'pages', threshold: '100%' },
},
});
expect(wrapper.vm.completionDropdown).toBe('allContent');
});
it(`'All content viewed' should be displayed if the model in the backend is 'pages'`, () => {
it(`'Reference' should be displayed if the model in the backend is 'reference'`, () => {
const wrapper = mount(CompletionOptions, {
propsData: {
kind: 'document',
value: { model: 'pages', threshold: '100%' },
value: { model: 'reference' },
},
});
expect(wrapper.vm.completionDropdown).toBe('allContent');
expect(wrapper.vm.completionDropdown).toBe('reference');
});
it(`'Complete duration' should be displayed if 'exact time'`, () => {
const wrapper = mount(CompletionOptions, {
Expand Down Expand Up @@ -145,7 +145,7 @@ describe('CompletionOptions', () => {
});
});
describe(`exercise`, () => {
it(`'Practice until goal is met' should be displayed by default if 'practice quiz' is enabled `, () => {
it(`'When goal is met' should be displayed by default`, () => {
const wrapper = mount(CompletionOptions, {
propsData: {
kind: 'exercise',
Expand All @@ -156,7 +156,7 @@ describe('CompletionOptions', () => {
});
});
describe(`html5 or h5p`, () => {
it(`'Complete duration' should be displayed by default for html5`, () => {
it(`'When time spent is equal to duration' should be displayed by default for html5 and h5p`, () => {
const wrapper = mount(CompletionOptions, {
propsData: {
kind: 'html5',
Expand All @@ -165,15 +165,6 @@ describe('CompletionOptions', () => {
});
expect(wrapper.vm.completionDropdown).toBe('completeDuration');
});
it(`'Determined by this resource' should be displayed if there is no model in the backend for h5p`, () => {
const wrapper = mount(CompletionOptions, {
propsData: {
kind: 'h5p',
value: { model: null },
},
});
expect(wrapper.vm.completionDropdown).toBe('determinedByResource');
});
});
});
describe(`changing states`, () => {
Expand All @@ -191,19 +182,18 @@ describe('CompletionOptions', () => {
expect(wrapper.emitted('input')).toBeTruthy();
});
});
describe(`audio/video`, () => {
describe(`reference hint`, () => {
it(`'Reference hint is visible when 'Reference' is selected`, () => {
const wrapper = mount(CompletionOptions, {
propsData: {
kind: 'audio',
value: { model: 'reference' },
},
});
expect(wrapper.vm.showReferenceHint).toBe(true);
});
});
describe(`exercise`, () => {
it(`Goal and MofN components should not be displayed when switching to PQ from PUGIM`, async () => {
it(`Goal and MofN components should not be displayed when 'Practice Quiz' is selected`, async () => {
const wrapper = mount(CompletionOptions, {
propsData: {
kind: 'exercise',
Expand Down Expand Up @@ -278,7 +268,10 @@ describe('CompletionOptions', () => {
const wrapper = mount(CompletionOptions, {
propsData: {
kind: 'h5p',
value: { suggested_duration: null },
value: {
suggested_duration: null,
model: CompletionCriteriaModels.DETERMINED_BY_RESOURCE,
},
},
});
const dropdown = wrapper.find({ ref: 'duration' });
Expand Down Expand Up @@ -625,7 +618,7 @@ describe('CompletionOptions', () => {
});
describe(`html5 or h5p`, () => {
describe(`when completion dropdown is 'Determined by this resource'`, () => {
it(`minutes input is displayed when 'Short activity' is selected`, async () => {
it(`duration dropdown is always hidden`, async () => {
const wrapper = mount(CompletionOptions, {
propsData: {
kind: 'html5',
Expand All @@ -635,40 +628,9 @@ describe('CompletionOptions', () => {
},
},
});
wrapper.find({ ref: 'duration' }).vm.$emit('input', 'shortActivity');
await wrapper.vm.$nextTick();
expect(wrapper.find({ ref: 'activity_duration' }).exists()).toBe(true);
expect(wrapper.vm.showActivityDurationInput).toBe(true);
});
it(`minutes input is displayed when 'Long activity' is selected`, async () => {
const wrapper = mount(CompletionOptions, {
propsData: {
kind: 'html5',
value: {
suggested_duration: null,
model: CompletionCriteriaModels.DETERMINED_BY_RESOURCE,
},
},
});
wrapper.find({ ref: 'duration' }).vm.$emit('input', 'longActivity');
await wrapper.vm.$nextTick();
expect(wrapper.find({ ref: 'activity_duration' }).exists()).toBe(true);
expect(wrapper.vm.showActivityDurationInput).toBe(true);
});
it(`minutes input is displayed when 'Exact time' is selected`, async () => {
const wrapper = mount(CompletionOptions, {
propsData: {
kind: 'html5',
value: {
suggested_duration: null,
model: CompletionCriteriaModels.DETERMINED_BY_RESOURCE,
},
},
});
wrapper.find({ ref: 'duration' }).vm.$emit('input', 'exactTime');
await wrapper.vm.$nextTick();
expect(wrapper.find({ ref: 'activity_duration' }).exists()).toBe(true);
expect(wrapper.vm.showActivityDurationInput).toBe(true);
expect(wrapper.find({ ref: 'activity_duration' }).exists()).toBe(false);
expect(wrapper.find({ ref: 'duration' }).exists()).toBe(false);
expect(wrapper.vm.showActivityDurationInput).toBe(false);
});
it(`minutes input is hidden and reference hint is displayed when 'Reference' is selected`, () => {
const wrapper = mount(CompletionOptions, {
Expand Down