Merge pull request #562 from openstax/core-602-list-marker-style

Style multi-choice answers more like multi-part questions

.nvmrc

@@ -0,0 +1 @@
+v18.19.0

CHANGELOG.md

@@ -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
 

styles/books/accounting/book.scss

@@ -139,6 +139,7 @@ $bandColor: #24739e;
     "ProblemSolutionNumber:::width": 2%,
     "ProblemSolutionNumber:::text-align": right,
     "ProblemSolutionText:::color": (_ref: "colorMap:::fontBodyColor"),
+    'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
   ),
 ));
 

styles/books/astronomy/book.scss

@@ -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"),

styles/books/bca/book.scss

@@ -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"]'),

styles/books/business-ethics/book.scss

@@ -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((

styles/books/computer-science/book.scss

@@ -125,6 +125,7 @@ $bandColor: #24739E;
         'ProblemSolutionNumber:::width': 2%,
         'ProblemSolutionNumber:::text-align': right,
         'ProblemSolutionText:::color': (_ref: 'colorMap:::fontBodyColor'),
+        'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
     ),
 ));
 

styles/books/data-science/book.scss

@@ -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"]'),
@@ -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');

styles/books/entrepreneurship/book.scss

@@ -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'),

styles/books/finance/book.scss

@@ -92,6 +92,7 @@ $bandColor: #24739E;
     'ProblemSolutionNumber:::color': (_ref: "colorMap:::fontBodyColor"),
     'ProblemSolutionNumber:::width': 2%,
     'ProblemSolutionNumber:::text-align': right,
+    'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
   ),
 ));
 

styles/books/generic/webview.scss

@@ -340,6 +340,14 @@
     ),
 ));
 
+@include add_settings((
+    InjectedExercise: (
+        InjectedQuestionAnswersAnswerLetter: (
+            color: (_ref: 'colorMap:::ExerciseNumber'),
+        ),
+    ),
+));
+
 @include add_settings((
     ColumnsFromTable: (
         _selectors: (".os-table"),

styles/books/information-systems/book.scss

@@ -55,6 +55,7 @@ TextHeavyWithTitleTable: (
         'ProblemSolutionNumber:::width': 2%,
         'ProblemSolutionNumber:::text-align': right,
         'ProblemSolutionText:::color': (_ref: 'colorMap:::fontBodyColor'),
+        'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
     ),
 ));
 

styles/books/marketing/book.scss

@@ -160,6 +160,7 @@ $bandColor: #9028A3;
     'ProblemSolutionNumber:::color': (_ref: "colorMap:::fontBodyColor"),
     'ProblemSolutionNumber:::width': 2%,
     'ProblemSolutionNumber:::text-align': right,
+    'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
   ),
 ));
 

styles/books/pl-marketing/book.scss

@@ -123,6 +123,7 @@ $bandColor: #9028A3;
     'ProblemSolutionNumber:::color': (_ref: "colorMap:::fontBodyColor"),
     'ProblemSolutionNumber:::width': 2%,
     'ProblemSolutionNumber:::text-align': right,
+    'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
   ),
 ));
 

styles/books/principles-management/book.scss

@@ -162,6 +162,7 @@ $bandColor: #24739E;
     'ProblemSolutionNumber:::color': (_ref: "colorMap:::fontBodyColor"),
     'ProblemSolutionNumber:::width': 2%,
     'ProblemSolutionNumber:::text-align': right,
+    'InjectedQuestionAnswersAnswerLetter:::color': (_ref: 'colorMap:::fontBodyColor'),
   ),
 ));
 

styles/books/python/book.scss

@@ -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((

styles/designs/cardboard/parts/_exercises-components.scss

@@ -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) "."',
+    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",
@@ -215,6 +254,6 @@ $Exercise__ProblemSolution__AnswerLetters: (
   _name: "ProblemSolutionAnswerLetters",
   _subselector: " > span.answer-letters",
   _properties: (
-    font-weight: enum('ValueSet:::OPTIONAL')
+    font-weight: bold
   )
 );

styles/designs/cardboard/parts/_exercises-shapes.scss

@@ -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,

styles/designs/webview/parts/_exercise-components.scss

@@ -111,6 +111,46 @@ $Exercise__Problem__MCAnswer__Pre: (
   )
 );
 
+
+$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__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) "."',
+    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']",

styles/designs/webview/parts/_exercise-shapes.scss

@@ -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,
+                                    )
+                                )),
                             )
                         )),
                     ),