prepare web content for interactive show/hide solutions

lib/kitchen/directions/bake_hidden_solutions_web.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Kitchen::Directions
+  module BakeHiddenSolutionsWeb
+    def self.v1(book_pages:)
+      book_pages.exercises('$.unnumbered').each do |exercise|
+        # wrap content, add [Show/Hide Solution] element
+        solution = exercise.solutions&.first
+        next unless solution
+
+        show_hide_translated = 'Show/Hide Solution' # TODO: I18n.t(:problem) - why is this broken?
+        solution[:'aria-label'] = show_hide_translated
+        children = solution.element_children.cut
+        solution.append(child:
+          <<~HTML
+            <summary class="btn-link ui-toggle" title="#{show_hide_translated}" data-content="#{show_hide_translated}">[#{show_hide_translated}]</summary>
+            <section class="ui-body" role="alert">#{children.paste}</section>
+          HTML
+        )
+        solution.name = 'details'
+      end
+    end
+  end
+end

lib/locales/en.yml

@@ -32,6 +32,7 @@ en:
   handbook_outline_title: Outline
   context_lead_text: 'Refer to '
   lo_label_text: 'LO '
+  show_hide_solution: 'Show/Hide Solution'
   eoc:
     glossary: Key Terms
     key-equations: Key Equations

lib/recipes/web-generic/recipe.rb

@@ -19,6 +19,7 @@
       BakeExerciseWithTitle.v1(within: example)
     end
   end
+  BakeHiddenSolutionsWeb.v1(book_pages: book_pages)
 
   # Restore
   WebPostBakeRestore.v1(book_pages: book_pages)

spec/kitchen_spec/directions/bake_hidden_solutions_web_spec.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Kitchen::Directions::BakeHiddenSolutionsWeb do
+  let(:content) do
+    book_containing(html:
+      <<~HTML
+        <div data-type="exercise" class="unnumbered">
+          <div data-type="problem" />
+          <div data-type="solution" abc="123">
+            <span>solution content</span>
+          </div>
+        </div>
+      HTML
+    )
+  end
+
+  it 'works' do
+    described_class.v1(book_pages: content)
+    expect(content).to match_snapshot_auto
+  end
+end

spec/recipes_spec/books/web-test/expected_output.xhtml

@@ -1146,19 +1146,22 @@ Dr. William Moebs earned a BS and PhD (1959 and 1965) from the University of Mic
                       <p id="auto_cb418599-f69b-46c1-b0ef-60d9e36e677f_fs-idm51690528" data-sm="./modules/m46909/index.cnxml:71:1">Determine what the key terms refer to in the following study. We want to know the average (mean) amount of money first year college students spend at ABC College on school supplies that do not include books. We randomly surveyed 100 first year students at the college.  Three of those students spent $150, $200, and $225, respectively.</p>
                     </div>
                   </div>
-                  <div data-type="solution" id="auto_cb418599-f69b-46c1-b0ef-60d9e36e677f_fs-idm78922624" data-sm="./modules/m46909/index.cnxml:72:1">
-                    <h2 data-type="solution-title">
-                      <span class="os-title-label">Solution</span>
-                    </h2>
-                    <div class="os-solution-container">
-                      <p id="auto_cb418599-f69b-46c1-b0ef-60d9e36e677f_fs-idm66686064" data-sm="./modules/m46909/index.cnxml:73:1">The <strong data-sm="./modules/m46909/index.cnxml:73:31">population</strong> is all first year students attending ABC College this term.</p>
-                      <p id="auto_cb418599-f69b-46c1-b0ef-60d9e36e677f_fs-idm40196160" data-sm="./modules/m46909/index.cnxml:74:1">The <strong data-sm="./modules/m46909/index.cnxml:74:31">sample</strong> could be all students enrolled in one section of a beginning statistics course at ABC College (although this sample may not represent the entire population).</p>
-                      <p id="auto_cb418599-f69b-46c1-b0ef-60d9e36e677f_fs-idm58257248" data-sm="./modules/m46909/index.cnxml:75:1">The <strong data-sm="./modules/m46909/index.cnxml:75:31">parameter</strong> is the average (mean) amount of money spent (excluding books) by first year college students at ABC College this term.</p>
-                      <p id="auto_cb418599-f69b-46c1-b0ef-60d9e36e677f_fs-idm56787136" data-sm="./modules/m46909/index.cnxml:76:1">The <strong data-sm="./modules/m46909/index.cnxml:76:31">statistic</strong> is the average (mean) amount of money spent (excluding books) by first year college students in the sample.</p>
-                      <p id="auto_cb418599-f69b-46c1-b0ef-60d9e36e677f_fs-idm39343328" data-sm="./modules/m46909/index.cnxml:77:1">The <strong data-sm="./modules/m46909/index.cnxml:77:31">variable</strong> could be the amount of money spent (excluding books) by one first year student. Let <em data-effect="italics" data-sm="./modules/m46909/index.cnxml:77:145">X</em> = the amount of money spent (excluding books) by one first year student attending ABC College.</p>
-                      <p id="auto_cb418599-f69b-46c1-b0ef-60d9e36e677f_fs-idm9924960" data-sm="./modules/m46909/index.cnxml:77:286">The <strong data-sm="./modules/m46909/index.cnxml:77:315">data</strong> are the dollar amounts spent by the first year students. Examples of the data are $150, $200, and $225.</p>
-                    </div>
-                  </div>
+                  <details data-type="solution" id="auto_cb418599-f69b-46c1-b0ef-60d9e36e677f_fs-idm78922624" data-sm="./modules/m46909/index.cnxml:72:1" aria-label="Show/Hide Solution">
+                    <summary class="btn-link ui-toggle" title="Show/Hide Solution" data-content="Show/Hide Solution">[Show/Hide Solution]</summary>
+                    <section class="ui-body" role="alert">
+                      <h2 data-type="solution-title">
+                        <span class="os-title-label">Solution</span>
+                      </h2>
+                      <div class="os-solution-container">
+                        <p id="auto_cb418599-f69b-46c1-b0ef-60d9e36e677f_fs-idm66686064" data-sm="./modules/m46909/index.cnxml:73:1">The <strong data-sm="./modules/m46909/index.cnxml:73:31">population</strong> is all first year students attending ABC College this term.</p>
+                        <p id="auto_cb418599-f69b-46c1-b0ef-60d9e36e677f_fs-idm40196160" data-sm="./modules/m46909/index.cnxml:74:1">The <strong data-sm="./modules/m46909/index.cnxml:74:31">sample</strong> could be all students enrolled in one section of a beginning statistics course at ABC College (although this sample may not represent the entire population).</p>
+                        <p id="auto_cb418599-f69b-46c1-b0ef-60d9e36e677f_fs-idm58257248" data-sm="./modules/m46909/index.cnxml:75:1">The <strong data-sm="./modules/m46909/index.cnxml:75:31">parameter</strong> is the average (mean) amount of money spent (excluding books) by first year college students at ABC College this term.</p>
+                        <p id="auto_cb418599-f69b-46c1-b0ef-60d9e36e677f_fs-idm56787136" data-sm="./modules/m46909/index.cnxml:76:1">The <strong data-sm="./modules/m46909/index.cnxml:76:31">statistic</strong> is the average (mean) amount of money spent (excluding books) by first year college students in the sample.</p>
+                        <p id="auto_cb418599-f69b-46c1-b0ef-60d9e36e677f_fs-idm39343328" data-sm="./modules/m46909/index.cnxml:77:1">The <strong data-sm="./modules/m46909/index.cnxml:77:31">variable</strong> could be the amount of money spent (excluding books) by one first year student. Let <em data-effect="italics" data-sm="./modules/m46909/index.cnxml:77:145">X</em> = the amount of money spent (excluding books) by one first year student attending ABC College.</p>
+                        <p id="auto_cb418599-f69b-46c1-b0ef-60d9e36e677f_fs-idm9924960" data-sm="./modules/m46909/index.cnxml:77:286">The <strong data-sm="./modules/m46909/index.cnxml:77:315">data</strong> are the dollar amounts spent by the first year students. Examples of the data are $150, $200, and $225.</p>
+                      </div>
+                    </section>
+                  </details>
                 </div>
                 <p id="auto_78458ad4-769a-45d1-a981-1abe1b108fd9_fs-id1168326780923" data-sm="./modules/m58270/index.cnxml:227:1"><h3 data-type="title" data-sm="./modules/m58270/index.cnxml:228:1">Using Metric Prefixes</h3>
 Restate the mass <span class="os-math-in-para"><m:math display="inline"><m:semantics><m:mrow><m:mrow data-sm="./modules/m58270/index.cnxml:229:26"><m:mn data-sm="./modules/m58270/index.cnxml:229:34">1.93</m:mn><m:mspace width="0.2em" data-sm="./modules/m58270/index.cnxml:229:51"></m:mspace><m:mo data-sm="./modules/m58270/index.cnxml:229:76">&#xD7;</m:mo><m:mspace width="0.2em" data-sm="./modules/m58270/index.cnxml:229:90"></m:mspace><m:msup data-sm="./modules/m58270/index.cnxml:229:115"><m:mrow data-sm="./modules/m58270/index.cnxml:229:123"><m:mn data-sm="./modules/m58270/index.cnxml:229:131">10</m:mn></m:mrow><m:mrow data-sm="./modules/m58270/index.cnxml:229:155"><m:mn data-sm="./modules/m58270/index.cnxml:229:163">13</m:mn></m:mrow></m:msup><m:mtext data-sm="./modules/m58270/index.cnxml:229:196">kg</m:mtext></m:mrow></m:mrow><m:annotation-xml encoding="MathML-Content"><m:mrow data-sm="./modules/m58270/index.cnxml:229:26"><m:mn data-sm="./modules/m58270/index.cnxml:229:34">1.93</m:mn><m:mspace width="0.2em" data-sm="./modules/m58270/index.cnxml:229:51"></m:mspace><m:mo data-sm="./modules/m58270/index.cnxml:229:76">&#xD7;</m:mo><m:mspace width="0.2em" data-sm="./modules/m58270/index.cnxml:229:90"></m:mspace><m:msup data-sm="./modules/m58270/index.cnxml:229:115"><m:mrow data-sm="./modules/m58270/index.cnxml:229:123"><m:mn data-sm="./modules/m58270/index.cnxml:229:131">10</m:mn></m:mrow><m:mrow data-sm="./modules/m58270/index.cnxml:229:155"><m:mn data-sm="./modules/m58270/index.cnxml:229:163">13</m:mn></m:mrow></m:msup><m:mtext data-sm="./modules/m58270/index.cnxml:229:196">kg</m:mtext></m:mrow></m:annotation-xml></m:semantics></m:math></span> using a metric prefix such that the resulting numerical value is bigger than one but less than 1000.</p>

spec/snapshots/Kitchen_Directions_BakeHiddenSolutionsWeb_works.snap

@@ -0,0 +1,13 @@
+<html xmlns:m="http://www.w3.org/1998/Math/MathML">
+  <body>
+    <div data-type="exercise" class="unnumbered">
+  <div data-type="problem"/>
+  <details data-type="solution" abc="123" aria-label="Show/Hide Solution">
+
+  <summary class="btn-link ui-toggle" title="Show/Hide Solution" data-content="Show/Hide Solution">[Show/Hide Solution]</summary>
+<section class="ui-body" role="alert"><span>solution content</span></section>
+</details>
+</div>
+
+  </body>
+</html>