From 98e68d04be5ecf0eff747580228425a0a6057e16 Mon Sep 17 00:00:00 2001
From: lasjorg <28780271+lasjorg@users.noreply.github.com>
Date: Mon, 25 Mar 2019 00:43:05 +0100
Subject: [PATCH] feat(curriculum): Add challenge on using the value attribute
 (#35301)

* feat(curriculum): Add challenge on using the value attribute

fix(challenge): update file name and add comma

Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md

Co-Authored-By: lasjorg <28780271+lasjorg@users.noreply.github.com>

Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md

Co-Authored-By: lasjorg <28780271+lasjorg@users.noreply.github.com>

Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md

Co-Authored-By: lasjorg <28780271+lasjorg@users.noreply.github.com>

Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md

Co-Authored-By: lasjorg <28780271+lasjorg@users.noreply.github.com>

Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md

Co-Authored-By: lasjorg <28780271+lasjorg@users.noreply.github.com>

Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md

Co-Authored-By: lasjorg <28780271+lasjorg@users.noreply.github.com>

Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md

Co-Authored-By: lasjorg <28780271+lasjorg@users.noreply.github.com>

Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md

Co-Authored-By: lasjorg <28780271+lasjorg@users.noreply.github.com>

Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md

Co-Authored-By: lasjorg <28780271+lasjorg@users.noreply.github.com>

Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md

Co-Authored-By: lasjorg <28780271+lasjorg@users.noreply.github.com>

Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md

Co-Authored-By: lasjorg <28780271+lasjorg@users.noreply.github.com>

Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md

Co-Authored-By: lasjorg <28780271+lasjorg@users.noreply.github.com>

Apply suggestions from code review

Co-Authored-By: lasjorg <28780271+lasjorg@users.noreply.github.com>

* fix(challenge): update tests
---
 .../_meta/basic-html-and-html5/meta.json      |   4 +
 ...ttons-and-checkboxes-by-default.english.md |  20 +--
 ...ibute-with-radio-buttons-and-checkboxes.md | 122 ++++++++++++++++++
 3 files changed, 136 insertions(+), 10 deletions(-)
 create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md

diff --git a/curriculum/challenges/_meta/basic-html-and-html5/meta.json b/curriculum/challenges/_meta/basic-html-and-html5/meta.json
index 8e1653d849..cdf1ac7466 100644
--- a/curriculum/challenges/_meta/basic-html-and-html5/meta.json
+++ b/curriculum/challenges/_meta/basic-html-and-html5/meta.json
@@ -100,6 +100,10 @@
       "bad87fee1348bd9aedf08835",
       "Create a Set of Checkboxes"
     ],
+    [
+      "5c6c06847491271903d37cfd",
+      "Use the value attribute with Radio Buttons and Checkboxes"
+    ],
     [
       "bad87fee1348bd9aedd08835",
       "Check Radio Buttons and Checkboxes by Default"
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.english.md
index ce80ca8425..c2212c143d 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.english.md
@@ -56,11 +56,11 @@ tests:
     <li>other cats</li>
   </ol>
   <form action="/submit-cat-photo">
-    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
-    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
-    <label><input type="checkbox" name="personality"> Loving</label>
-    <label><input type="checkbox" name="personality"> Lazy</label>
-    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <label><input type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" value="loving"> Loving</label>
+    <label><input type="checkbox" name="personality" value="lazy"> Lazy</label>
+    <label><input type="checkbox" name="personality" value="energetic"> Energetic</label><br>
     <input type="text" placeholder="cat photo URL" required>
     <button type="submit">Submit</button>
   </form>
@@ -96,11 +96,11 @@ tests:
     <li>other cats</li>
   </ol>
   <form action="/submit-cat-photo">
-    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
-    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
-    <label><input type="checkbox" name="personality" checked> Loving</label>
-    <label><input type="checkbox" name="personality"> Lazy</label>
-    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <label><input type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" value="loving" checked> Loving</label>
+    <label><input type="checkbox" name="personality" value="lazy"> Lazy</label>
+    <label><input type="checkbox" name="personality" value="energetic"> Energetic</label><br>
     <input type="text" placeholder="cat photo URL" required>
     <button type="submit">Submit</button>
   </form>
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md
new file mode 100644
index 0000000000..f3f5194468
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md
@@ -0,0 +1,122 @@
+---
+id: 5c6c06847491271903d37cfd
+title: Use the value attribute with Radio Buttons and Checkboxes
+challengeType: 0
+---
+
+## Description
+<section id='description'>
+When a form gets submitted, the data is sent to the server and includes entries for the options selected. Inputs of type <code>radio</code> and <code>checkbox</code> report their values from the <code>value</code> attribute.
+
+For example:
+<blockquote>
+&#60;label for="indoor"&#62; <br>&nbsp;&nbsp;&#60;input id="indoor" value="indoor" type="radio" name="indoor-outdoor"&#62;Indoor <br>&#60;/label&#62;<br>
+&#60;label for="outdoor"&#62; <br>&nbsp;&nbsp;&#60;input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor"&#62;Outdoor <br>&#60;/label&#62;
+</blockquote>
+
+Here, you have two <code>radio</code> inputs. When the user submits the form with the <code>indoor</code> option selected, the form data will include the line: <code>indoor-outdoor=indoor</code>. This is from the <code>name</code> and <code>value</code> attributes of the "indoor" input.
+
+If you omit the <code>value</code> attribute, the submitted form data uses the default value, which is <code>on</code>. In this scenario, if the user clicked the "indoor" option and submitted the form, the resulting form data would be <code>indoor-outdoor=on</code>, which is not useful. So the <code>value</code> attribute needs to be set to something to identify the option.
+</section>
+
+## Instructions
+<section id='instructions'>
+Give each of the <code>radio</code> and <code>checkbox</code> inputs the <code>value</code> attribute. Use the input label text, in lowercase, as the value for the attribute.
+</section>
+
+## Tests
+<section id='tests'>
+
+```yml
+tests:
+  - text: One of your radio buttons should have the <code>value</code> attribute of <code>indoor</code>.
+    testString: assert($('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']").length > 0);
+  - text: One of your radio buttons should have the <code>value</code> attribute of <code>outdoor</code>.
+    testString: assert($('label:contains("Outdoor") > input[type="radio"]').filter("[value='outdoor']").length > 0);
+  - text: One of your checkboxes should have the <code>value</code> attribute of <code>loving</code>.
+    testString: assert($('label:contains("Loving") > input[type="checkbox"]').filter("[value='loving']").length > 0);
+  - text: One of your checkboxes should have the <code>value</code> attribute of <code>lazy</code>.
+    testString: assert($('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']").length > 0);
+  - text: One of your checkboxes should have the <code>value</code> attribute of <code>energetic</code>.
+    testString: assert($('label:contains("Energetic") > input[type="checkbox"]').filter("[value='energetic']").length > 0);
+```
+
+</section>
+
+## Challenge Seed
+<section id='challengeSeed'>
+
+<div id='html-seed'>
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+  
+  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+  
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+// solution required
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+  
+  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+  
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" value="loving"> Loving</label>
+    <label><input type="checkbox" name="personality" value="lazy"> Lazy</label>
+    <label><input type="checkbox" name="personality" value="energetic"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+</section>