Adjust metric pages:

- put the previous/next metric controls inside the 3/4 width container,
  so long sidebars don't hide the bottom control
- don't repeat the question title

Also fix some HTML escape codes for questions.

codegen/area_check.py

@@ -27,7 +27,6 @@
 
             questions.append(
                 {
-                    "Label": label,
                     "Description": description,
                     "Cases": [],
                 }
@@ -47,7 +46,6 @@
 
         f.write("""<Question\n""")
         f.write("  idx={" + str(idx + 1) + "}\n")
-        f.write("""  label="{}"\n""".format(question["Label"]))
 
         f.write("""  cases={[\n""")
         for score, answer in question["Cases"]:

codegen/common.py

@@ -4,6 +4,9 @@
 def html(x):
     x = x.replace('"', '\\"')
     x = x.replace("<", "&lt;")
+    x = x.replace(">", "&gt;")
+    x = x.replace("≤", "&le;")
+    x = x.replace("≥", "&ge;")
 
     y = ""
     is_list = False

codegen/path_check.py

@@ -56,7 +56,6 @@
 
             f.write("""<Question\n""")
             f.write("  idx={" + str(idx) + "}\n")
-            f.write("""  label="{}"\n""".format(row["Metric"]))
 
             f.write("""  cases={[\n""")
             f.write("""    ["2", "{}"],\n""".format(html(row["Green"])))

codegen/path_placemaking_check.py

@@ -32,7 +32,6 @@
 
             f.write("""<Question\n""")
             f.write("  idx={" + str(idx) + "}\n")
-            f.write("""  label="{}"\n""".format(row["Metric"]))
 
             f.write("""  cases={[\n""")
             f.write("""    ["2", "{}"],\n""".format(html(row["Green"])))

codegen/planning.py

@@ -35,7 +35,6 @@ def htmlList(x):
 
             f.write("""<Question\n""")
             f.write("  idx={" + str(idx) + "}\n")
-            f.write("""  label="{}"\n""".format(row["Criterion"].strip()))
             f.write(""">\n""")
 
             f.write(

codegen/safety_check.py

@@ -39,7 +39,6 @@
 
             f.write("""<Question\n""")
             f.write("  idx={" + str(idx) + "}\n")
-            f.write("""  label="{}"\n""".format(row["Metric"]))
 
             f.write("""  cases={[\n""")
             f.write("""    ["2", "{}"],\n""".format(html(row["Green"])))

codegen/street_check.py

@@ -39,7 +39,6 @@
 
             f.write("""<Question\n""")
             f.write("  idx={" + str(idx) + "}\n")
-            f.write("""  label="{}"\n""".format(row["Metric"]))
 
             f.write("""  cases={[\n""")
             f.write("""    ["2", "{}"],\n""".format(html(row["Green"])))

codegen/street_placemaking_check.py

@@ -32,7 +32,6 @@
 
             f.write("""<Question\n""")
             f.write("  idx={" + str(idx) + "}\n")
-            f.write("""  label="{}"\n""".format(row["Metric"]))
 
             f.write("""  cases={[\n""")
             f.write("""    ["2", "{}"],\n""".format(html(row["Green"])))

src/routes/area_check/scorecard/Question.svelte

@@ -4,7 +4,6 @@
   import { state } from "../data";
 
   export let idx: number;
-  export let label: string;
   export let cases: [number, string][];
 
   // Note these are different than the ones used in route check
@@ -27,15 +26,13 @@
   );
 </script>
 
-<PrevNext {idx} total={13} urlPath="area_check/scorecard/q" />
-
 <div class="govuk-grid-row" style="margin: 1em">
   <div class="govuk-grid-column-one-quarter">
     <Progress currentIdx={idx} />
   </div>
 
   <div class="govuk-grid-column-three-quarters">
-    <h2>{label}</h2>
+    <PrevNext {idx} total={13} urlPath="area_check/scorecard/q" />
 
     <slot />
 
@@ -46,7 +43,7 @@
       bind:existingNotes={$state.existingScoreNotes[idx - 1]}
       bind:proposedNotes={$state.proposedScoreNotes[idx - 1]}
     />
+
+    <PrevNext {idx} total={13} urlPath="area_check/scorecard/q" />
   </div>
 </div>
-
-<PrevNext {idx} total={13} urlPath="area_check/scorecard/q" />

src/routes/area_check/scorecard/q01/+page.svelte

@@ -4,7 +4,6 @@
 
 <Question
   idx={1}
-  label="Porosity - Walking and Wheeling"
   cases={[
     [
       4,

src/routes/area_check/scorecard/q02/+page.svelte

@@ -4,7 +4,6 @@
 
 <Question
   idx={2}
-  label="Porosity - Cycling"
   cases={[
     [
       4,

src/routes/area_check/scorecard/q03/+page.svelte

@@ -4,7 +4,6 @@
 
 <Question
   idx={3}
-  label="Crossings - Walking and Wheeling"
   cases={[
     [
       4,

src/routes/area_check/scorecard/q04/+page.svelte

@@ -5,7 +5,6 @@
 
 <Question
   idx={4}
-  label="Crossings - Cycling"
   cases={[
     [
       4,

src/routes/area_check/scorecard/q05/+page.svelte

@@ -4,7 +4,6 @@
 
 <Question
   idx={5}
-  label="Permeability - Walking and Wheeling"
   cases={[
     [
       4,
@@ -43,7 +42,7 @@
       Suitable footway widths as defined in DfT’s Inclusive Mobility guidance.
     </li>
     <li>Suitable tactile paving surfaces.</li>
-    <li>Acceptable footway camber (≤2.5%).</li>
+    <li>Acceptable footway camber (&le;2.5%).</li>
     <li>Minimal street clutter.</li>
     <li>Appropriate street lighting.</li>
   </ul>

src/routes/area_check/scorecard/q06/+page.svelte

@@ -4,7 +4,6 @@
 
 <Question
   idx={6}
-  label="Permeability - Cycling"
   cases={[
     [
       4,

src/routes/area_check/scorecard/q07/+page.svelte

@@ -4,7 +4,6 @@
 
 <Question
   idx={7}
-  label="Mesh Density - Walking and Wheeling"
   cases={[
     [4, "<p>The area has an average mesh density of 100m</p>"],
     [3, "<p>The area has an average mesh density of 101-250m</p>"],

src/routes/area_check/scorecard/q08/+page.svelte

@@ -4,7 +4,6 @@
 
 <Question
   idx={8}
-  label="Mesh Density - Cycling"
   cases={[
     [4, "<p>The area has an average mesh density of 250m.</p>"],
     [3, "<p>The area has an average mesh density of 251-400m.</p>"],

src/routes/area_check/scorecard/q09/+page.svelte

@@ -4,15 +4,14 @@
 
 <Question
   idx={9}
-  label="Motorised Through-Traffic"
   cases={[
     [
       8,
       "<p>The area does not allow any motorised through traffic. However, local access for motor traffic is still maintained for residents and businesses.</p>",
     ],
     [
       6,
-      "<p>Most motorised through traffic routes are closed in the area. However, local access for motor traffic is still maintained for residents and businesses.</p><p>There are good reasons why motor traffic through routes are in place, and there are measures to mitigate any potential issues relating to them.</p>",
+      "<p>Most motorised through traffic routes are closed in the area. However, local access for motor traffic is still maintained for residents and businesses.</p><p>There are good reasons why  motor traffic through routes are in place, and there are measures to mitigate any potential issues relating to them.</p>",
     ],
     [
       4,

src/routes/area_check/scorecard/q10/+page.svelte

@@ -4,7 +4,6 @@
 
 <Question
   idx={10}
-  label="Perimeter Treatment Design"
   cases={[
     [
       16,

src/routes/area_check/scorecard/q11/+page.svelte

@@ -4,7 +4,6 @@
 
 <Question
   idx={11}
-  label="Green Infrastructure Design"
   cases={[
     [
       12,

src/routes/area_check/scorecard/q12/+page.svelte

@@ -4,7 +4,6 @@
 
 <Question
   idx={12}
-  label="Other Internal Treatment Design"
   cases={[
     [
       16,

src/routes/area_check/scorecard/q13/+page.svelte

@@ -4,7 +4,6 @@
 
 <Question
   idx={13}
-  label="Engagement Practice"
   cases={[
     [
       16,

src/routes/planning/scorecard/Question.svelte

@@ -6,7 +6,6 @@
   import { state } from "../data";
 
   export let idx: number;
-  export let label: string;
 
   let choices: [string, string, string, string][] = [
     [
@@ -48,15 +47,13 @@
   ];
 </script>
 
-<PrevNext {idx} total={10} urlPath="planning/scorecard/q" />
-
 <div class="govuk-grid-row" style="margin: 1em">
   <div class="govuk-grid-column-one-quarter">
     <Progress currentIdx={idx} />
   </div>
 
   <div class="govuk-grid-column-three-quarters">
-    <h2>{idx}. {label}</h2>
+    <PrevNext {idx} total={10} urlPath="planning/scorecard/q" />
 
     <slot name="description" />
 
@@ -77,7 +74,7 @@
 
     <h3>Policy & Guidance</h3>
     <slot name="guidance" />
+
+    <PrevNext {idx} total={10} urlPath="planning/scorecard/q" />
   </div>
 </div>
-
-<PrevNext {idx} total={10} urlPath="planning/scorecard/q" />

src/routes/planning/scorecard/q01/+page.svelte

@@ -2,7 +2,7 @@
   import Question from "../Question.svelte";
 </script>
 
-<Question idx={1} label="Trip generation and assignment">
+<Question idx={1}>
   <div slot="description">
     <p>
       Does the application appropriately forecast all day trips to, from and

src/routes/planning/scorecard/q02/+page.svelte

@@ -2,7 +2,7 @@
   import Question from "../Question.svelte";
 </script>
 
-<Question idx={2} label="Active travel route audit">
+<Question idx={2}>
   <div slot="description">
     <p>
       Has an appropriate assessment on the design and accessibility of existing

src/routes/planning/scorecard/q03/+page.svelte

@@ -2,7 +2,7 @@
   import Question from "../Question.svelte";
 </script>
 
-<Question idx={3} label="Pedestrian access to local amenities">
+<Question idx={3}>
   <div slot="description">
     <p>
       Are most buildings within 800m from a range of amenities (such as primary

src/routes/planning/scorecard/q04/+page.svelte

@@ -2,7 +2,7 @@
   import Question from "../Question.svelte";
 </script>
 
-<Question idx={4} label="Cycling accessibility">
+<Question idx={4}>
   <div slot="description">
     <p>
       Are a range of local amenities, and town centres, railway stations,

src/routes/planning/scorecard/q05/+page.svelte

@@ -2,7 +2,7 @@
   import Question from "../Question.svelte";
 </script>
 
-<Question idx={5} label="Access to public transport">
+<Question idx={5}>
   <div slot="description">
     <p>
       Are all buildings within 400m of a high-frequency bus stop or 800m of a

src/routes/planning/scorecard/q06/+page.svelte

@@ -2,7 +2,7 @@
   import Question from "../Question.svelte";
 </script>
 
-<Question idx={6} label="Off-site transport infrastructure">
+<Question idx={6}>
   <div slot="description">
     <p>
       Does the application include proposals to enhance local active travel and

src/routes/planning/scorecard/q07/+page.svelte

@@ -2,7 +2,7 @@
   import Question from "../Question.svelte";
 </script>
 
-<Question idx={7} label="Site permeability">
+<Question idx={7}>
   <div slot="description">
     <p>
       Does the development prioritise pedestrian and cycle movements within the

src/routes/planning/scorecard/q08/+page.svelte

@@ -2,7 +2,7 @@
   import Question from "../Question.svelte";
 </script>
 
-<Question idx={8} label="Placemaking">
+<Question idx={8}>
   <div slot="description">
     <p>
       Does the development establish a strong sense of place, with well-designed

src/routes/planning/scorecard/q09/+page.svelte

@@ -2,7 +2,7 @@
   import Question from "../Question.svelte";
 </script>
 
-<Question idx={9} label="Cycle parking and trip-end facilities">
+<Question idx={9}>
   <div slot="description">
     <p>
       Does the application provide the requisite amount and quality of cycle

src/routes/planning/scorecard/q10/+page.svelte

@@ -2,7 +2,7 @@
   import Question from "../Question.svelte";
 </script>
 
-<Question idx={10} label="Travel planning">
+<Question idx={10}>
   <div slot="description">
     <p>
       Does the travel plan outline ambitious mode share targets and measures to