Question sources #11658
Question sources #11658
Conversation
github-actions
bot
added
APP: Learn
Build Artifacts
|
.trunk/.gitignore
Outdated
| @@ -0,0 +1,8 @@ | |||
| *out | |||
There was a problem hiding this comment.
Not sure what .trunk is but you can add it to the .gitignore file in the Kolibri project root.
Once you do that you'll need to run git rm -r --cached .trunk to remove it from the git index. It will keep the files on your local machine, however. Relevant StackOverflow
There was a problem hiding this comment.
In addition to some blocking comments, one other issue I noted is the spacing on the section title / description is a little off.
I think maybe we'll need ~1em padding so that the title isn't so close to the edge of its container:
Also, the chevron & section title area should be clickable such that it toggles the visibility of the description -- basically just like the accordion work from before but just a bit different.
In any case -- we also need to ensure we use the proper a11y properties like we did in the accordion like aria-expanded and the proper aria-labelledby / aria-label.
| let allExerciseIds = []; | ||
| if (exam.data_version == 3) { | ||
| allExerciseIds = exam.question_sources.reduce((acc, section) => { | ||
| console.log(section); |
| (exam.question_sources = question_sources), | ||
| store.commit('examViewer/SET_STATE', { |
There was a problem hiding this comment.
These two lines seem odd like this -- should this instead be two separate lines like:
exam.question_sources = question_sources;
store.commit('examViewer/SET_STATE', {
| :layout8="{ span: 2 }" | ||
| :layout4="{ span: 1 }" | ||
| > | ||
| <div style="float:right"> |
There was a problem hiding this comment.
For this chevron you should be able to use text-align: right here rather than the float property. We typically avoid float because it is not intended for use as a general layout property but more to position things within areas of text.
| <div class="" style="float:right"> | ||
| <div class="" style="float:right"> |
There was a problem hiding this comment.
I'm wondering why the two floats are needed here.
In this case I think that we could leverage some other CSS properties for a cleaner and more consistent alignment & layout.
By using the position: relative; property on the parent element (the outermost <div> here), we can then use position: absolute; on any child of that div so that you can position that child w/ the right/left/top/bottom CSS properties
In this case, I'd suggest trying the following structure -- which may not be exactly right but should hopefully demonstrate the idea:
<KGridItem ...>
<div style="position: relative;">
<KButton style="position: absolute; right: 0">
This way it can be reasoned about kinda like:
The KButton is absolutely 0px from the right edge, relative to the parent div
| section_title: 'Section one', | ||
| description: 'Sample description', |
There was a problem hiding this comment.
One thing to note is that we should probably revert this. It is causing the tests to fail and if we are going to introduce a title and/or description by default we'll need to use a translated string and account for it in the tests. We can handle this in a separate follow-up issue
There was a problem hiding this comment.
Oops! I think I missed it before committing.
There was a problem hiding this comment.
In testing things look good - I think that one thing we may need to work out is how we'll handle the empty state, but that can be handled in a follow-up issue. This appears to successfully make the new quiz structure backward compatible as needed.
When all the checks are passing, this is ready to merge. Thanks @AllanOXDi
Summary
This PR updates the examViewer module and ExamPage to accommodate the changes in the exam schema, ensuring consistent data structure representation for quizzes with version 3.
Closes #11581
References
#11581
Reviewer guidance
See this figma design
Testing checklist
PR process
Reviewer checklist
yarnandpip)