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

Style multi-choice answers more like multi-part questions #562

Merged
merged 1 commit into from
Dec 12, 2024
Merged

Style multi-choice answers more like multi-part questions #562

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
1 change: 1 addition & 0 deletions .nvmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
v18.19.0
5 changes: 4 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

## [Unreleased]


- Add multi-choice answer components to `cardboard`
- Add multi-choice answer components to `webview`
- Style multi-choice answers more like multi-part questions in `cardboard`
- Style multi-choice answers more like multi-part questions in `webview`

## [v2.7.0] - 2024-10-24

Expand Down
1 change: 1 addition & 0 deletions styles/books/accounting/book.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@ $bandColor: #24739e;
"ProblemSolutionNumber:::width": 2%,
"ProblemSolutionNumber:::text-align": right,
"ProblemSolutionText:::color": (_ref: "colorMap:::fontBodyColor"),
'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
),
));

Expand Down
1 change: 1 addition & 0 deletions styles/books/astronomy/book.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,7 @@ $bandColor: #772949;
'ProblemSolutionNumber:::color': (_ref: "colorMap:::fontBodyColor"),
'ProblemSolutionNumber:::width': 2%,
'ProblemSolutionNumber:::text-align': right,
'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
),
ForFurtherExploration: (
_selectors: (".os-further-exploration-container"),
Expand Down
1 change: 1 addition & 0 deletions styles/books/bca/book.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ $bandColor: #24739E;
'ProblemSolutionNumber:::color': (_ref: "colorMap:::fontBodyColor"),
'ProblemSolutionNumber:::width': 2%,
'ProblemSolutionNumber:::text-align': right,
'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
),
MultipartQuestionExercises: (
_selectors: ('[data-type="injected-exercise"] [data-type="alphabetical-question-multipart"]'),
Expand Down
3 changes: 2 additions & 1 deletion styles/books/business-ethics/book.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,8 @@ $bandColor: #24739E;
'ProblemSolutionNumber:::color': (_ref: "colorMap:::fontBodyColor"),
'ProblemSolutionNumber:::width': 2%,
'ProblemSolutionNumber:::text-align': right,
),
'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
),
));

@include add_settings((
Expand Down
1 change: 1 addition & 0 deletions styles/books/computer-science/book.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ $bandColor: #24739E;
'ProblemSolutionNumber:::width': 2%,
'ProblemSolutionNumber:::text-align': right,
'ProblemSolutionText:::color': (_ref: 'colorMap:::fontBodyColor'),
'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
),
));

Expand Down
8 changes: 1 addition & 7 deletions styles/books/data-science/book.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ $bandColor: #24739E;
'ProblemSolutionNumber:::width': 2.2%,
'ProblemSolutionNumber:::text-align': right,
'ProblemSolutionText:::color': (_ref: 'colorMap:::fontBodyColor'),
'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
),
MultipartQuestionExercises: (
_selectors: ('[data-type="injected-exercise"] [data-type="alphabetical-question-multipart"]'),
Expand Down Expand Up @@ -115,13 +116,6 @@ $bandColor: #24739E;
),
));

@include add_settings((
"AnswerKeySolution:::ProblemSolutionAnswerLetters": (
font-weight: bold,
)
));


@include use('BookRoot', "common:::BookRoot");
@include use('Footnote', 'common:::FootnoteShape');
@include use('FootnoteCall', 'common:::FootnoteCallShape');
Expand Down
1 change: 1 addition & 0 deletions styles/books/entrepreneurship/book.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ $bandColor: #24739E;
'ProblemSolutionNumber:::color': (_ref: "colorMap:::fontBodyColor"),
'ProblemSolutionNumber:::width': 2%,
'ProblemSolutionNumber:::text-align': right,
'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
),
SuggestedResources: (
_selectors: ('.os-suggested-resources-container'),
Expand Down
1 change: 1 addition & 0 deletions styles/books/finance/book.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ $bandColor: #24739E;
'ProblemSolutionNumber:::color': (_ref: "colorMap:::fontBodyColor"),
'ProblemSolutionNumber:::width': 2%,
'ProblemSolutionNumber:::text-align': right,
'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
),
));

Expand Down
8 changes: 8 additions & 0 deletions styles/books/generic/webview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,6 +340,14 @@
),
));

@include add_settings((
InjectedExercise: (
InjectedQuestionAnswersAnswerLetter: (
color: (_ref: 'colorMap:::ExerciseNumber'),
),
),
));

@include add_settings((
ColumnsFromTable: (
_selectors: (".os-table"),
Expand Down
1 change: 1 addition & 0 deletions styles/books/information-systems/book.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ TextHeavyWithTitleTable: (
'ProblemSolutionNumber:::width': 2%,
'ProblemSolutionNumber:::text-align': right,
'ProblemSolutionText:::color': (_ref: 'colorMap:::fontBodyColor'),
'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
),
));

Expand Down
1 change: 1 addition & 0 deletions styles/books/marketing/book.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ $bandColor: #9028A3;
'ProblemSolutionNumber:::color': (_ref: "colorMap:::fontBodyColor"),
'ProblemSolutionNumber:::width': 2%,
'ProblemSolutionNumber:::text-align': right,
'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
),
));

Expand Down
1 change: 1 addition & 0 deletions styles/books/pl-marketing/book.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ $bandColor: #9028A3;
'ProblemSolutionNumber:::color': (_ref: "colorMap:::fontBodyColor"),
'ProblemSolutionNumber:::width': 2%,
'ProblemSolutionNumber:::text-align': right,
'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
),
));

Expand Down
1 change: 1 addition & 0 deletions styles/books/principles-management/book.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@ $bandColor: #24739E;
'ProblemSolutionNumber:::color': (_ref: "colorMap:::fontBodyColor"),
'ProblemSolutionNumber:::width': 2%,
'ProblemSolutionNumber:::text-align': right,
'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
),
));

Expand Down
3 changes: 2 additions & 1 deletion styles/books/python/book.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ $bandColor: #24739E;
'ProblemSolutionNumber:::color': (_ref: "colorMap:::fontBodyColor"),
'ProblemSolutionNumber:::width': 2%,
'ProblemSolutionNumber:::text-align': right,
),
'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
),
));

@include add_settings((
Expand Down
43 changes: 41 additions & 2 deletions styles/designs/cardboard/parts/_exercises-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,14 +115,53 @@ $InjectedExercise__Question__Stem--WithFirstElement: (
)
);

$InjectedExercise__Question__Answers--WithPre: (
$InjectedExercise__Question__MultiChoiceAnswers: (
_name: "InjectedQuestionAnswers",
_subselector: " ol[data-type=question-answers][type=a]",
_properties: (
counter-reset: multi-choice-index,
padding: 0,
margin: 0
)
);

$InjectedExercise__Question__Answers--AnswerWithPre: (
_name: "QuestionAnswersWithPre",
_subselector: " li[data-type=question-answer] pre",
_properties: (
margin: 0,
)
);

$InjectedExercise__Question__MultiChoiceAnswers--Answer: (
_name: "InjectedQuestionAnswersAnswer",
_subselector: " > li[data-type=question-answer]",
_properties: (
display: table,
counter-increment: multi-choice-index,
)
);

$InjectedExercise__Question__MultiChoiceAnswers--AnswerLetter: (
_name: "InjectedQuestionAnswersAnswerLetter",
_subselector: " > li[data-type=question-answer]::before",
_properties: (
font-weight: bold,
color: enum('ValueSet:::REQUIRED'),
content: 'counter(multi-choice-index, lower-latin) "."',
Copy link
Member

Choose a reason for hiding this comment

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

I'm not very familiar with this repo, so just trying to wrap my head around how stuff works - if we only need to bold the markup, why do we need to recreate the counters?

Copy link
Contributor Author

@TylerZeroMaster TylerZeroMaster Dec 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

That's a good question. While this could potentially be as easy as setting ol[type=a] > li::marker font-weight, this PR is part of a saga of making all other lists look more like multi-part questions (which are depicted in the Critical Thinking part of the PDF screenshot). There have been four other issues going in this direction and they always ask for one thing at a time.

If you look at the screenshots I added, the letters line up with the beginning of the question in Critical Thinking but not in Chapter Review. To replicate this in Chapter Review, I needed to change the display of the lists and list items to table and table-cell, respectively. Changing the display of a list item meant that I needed to recreate the list myself. Maybe there's another way, but I could not find one that yielded lists that looked identical to the ones in Critical Thinking.

Side note: I just noticed that the PDF letters were oddly spaced before as well. I think that is more related to my pdf reader, but it looks like the updated style fixed that as well.

I should probably have a screenshot of what these looked like before in the PR (will add). Edit: PR updated with screenshots

margin-right: h-spacing(1),
width: 16px,
)
);

$InjectedExercise__Question__MultiChoiceAnswers--AnswerContent: (
_name: "InjectedQuestionAnswersAnswerContent",
_subselector: " div[data-type=answer-content]",
_properties: (
display: table-cell,
)
);

// Solution components
$Exercise__Solution: (
_name: "ExerciseSolution",
Expand Down Expand Up @@ -215,6 +254,6 @@ $Exercise__ProblemSolution__AnswerLetters: (
_name: "ProblemSolutionAnswerLetters",
_subselector: " > span.answer-letters",
_properties: (
font-weight: enum('ValueSet:::OPTIONAL')
font-weight: bold
)
);
9 changes: 8 additions & 1 deletion styles/designs/cardboard/parts/_exercises-shapes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,14 @@
$Exercise__ProblemSolution__Text,
$Exercise__ProblemSolution__Number,
$Exercise__ProblemSolution__Divider,
$InjectedExercise__Question__Answers--WithPre,
map-merge($InjectedExercise__Question__MultiChoiceAnswers, (
_components: (
$InjectedExercise__Question__MultiChoiceAnswers--Answer,
$InjectedExercise__Question__MultiChoiceAnswers--AnswerLetter,
$InjectedExercise__Question__MultiChoiceAnswers--AnswerContent,
)
)),
$InjectedExercise__Question__Answers--AnswerWithPre,
map-merge($Exercise__Problem__Container, (
_components: (
$InjectedExercise__Context,
Expand Down
40 changes: 40 additions & 0 deletions styles/designs/webview/parts/_exercise-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,46 @@ $Exercise__Problem__MCAnswer__Pre: (
)
);


$InjectedExercise__Question__MultiChoiceAnswers: (
_name: "InjectedQuestionAnswers",
_subselector: " ol[data-type=question-answers][type=a]",
Copy link
Member

Choose a reason for hiding this comment

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

Are there other types?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

No, only type a at the moment. Right now there is a hard requirement that these lists are type a here when solutions are being moved around. I mostly added this to be explicit about which type of list to target.

_properties: (
counter-reset: multi-choice-index,
padding: 0,
margin: 0
)
);

$InjectedExercise__Question__MultiChoiceAnswers--Answer: (
_name: "InjectedQuestionAnswersAnswer",
_subselector: " > li[data-type=question-answer]",
_properties: (
display: table,
counter-increment: multi-choice-index,
)
);

$InjectedExercise__Question__MultiChoiceAnswers--AnswerLetter: (
_name: "InjectedQuestionAnswersAnswerLetter",
_subselector: " > li[data-type=question-answer]::before",
_properties: (
font-weight: bold,
color: enum('ValueSet:::REQUIRED'),
Copy link
Member

Choose a reason for hiding this comment

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

Ah so is this how https://github.com/openstax/ce-styles/pull/562/files#diff-2ef9b46ee73f2b5f90a0c9af10b57b997895796e60818518792027746e463d8fR346 gets used?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, you can override properties elsewhere if they are required or optional. If they are set here like the font-weight, however, they cannot be changed.

content: 'counter(multi-choice-index, lower-latin) "."',
margin-right: 0.5em,
width: 16px,
)
);

$InjectedExercise__Question__MultiChoiceAnswers--AnswerContent: (
_name: "InjectedQuestionAnswersAnswerContent",
_subselector: " div[data-type=answer-content]",
_properties: (
display: table-cell,
)
);

$Exercise__Question__Stem: (
_name: "ExerciseQuestionStem",
_subselector: " > [data-type='question-stem']",
Expand Down
7 changes: 7 additions & 0 deletions styles/designs/webview/parts/_exercise-shapes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,13 @@
$Exercise__Question__Stem,
$Image--AfterBold,
$Exercise__Problem__MCAnswer__Pre,
map-merge($InjectedExercise__Question__MultiChoiceAnswers, (
_components: (
$InjectedExercise__Question__MultiChoiceAnswers--Answer,
$InjectedExercise__Question__MultiChoiceAnswers--AnswerLetter,
$InjectedExercise__Question__MultiChoiceAnswers--AnswerContent,
)
)),
)
)),
),
Expand Down
Loading
Loading