Integrated php into clean and cluttered and adjusted radio values to be 0's and 1's

Clean Design Site/clean.html

@@ -24,7 +24,7 @@
             </div>
         </div>
     </header>
-    <form>
+    <form action="assets/php/clean.php" method="post">
         <section>
             <div class="container py-4 py-xl-5">
                 <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
@@ -34,8 +34,8 @@
                                 <div>
                                     <h5 class="fw-bold">National Park Service Asks Visitors to Please Stop Licking Toads</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-1" value="real" name="story3" required=""><label class="form-check-label" for="formCheck-1">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-2" value="fake" name="story3" required=""><label class="form-check-label" for="formCheck-2">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-1" value="1" name="story3" required=""><label class="form-check-label" for="formCheck-1">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-2" value="0" name="story3" required=""><label class="form-check-label" for="formCheck-2">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -45,8 +45,8 @@
                                 <div>
                                     <h5 class="fw-bold">Disney Wins Emmy For Best Profits</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-23" name="story10" value="real" required=""><label class="form-check-label" for="formCheck-23">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-24" name="story10" value="fake" required=""><label class="form-check-label" for="formCheck-24">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-23" name="story10" value="1" required=""><label class="form-check-label" for="formCheck-23">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-24" name="story10" value="0" required=""><label class="form-check-label" for="formCheck-24">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -56,8 +56,8 @@
                                 <div>
                                     <h5 class="fw-bold">Beer Lubricated the Rise of Civilization, Study Suggests</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-3" name="story1" value="real" required=""><label class="form-check-label" for="formCheck-3">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-4" name="story1" value="fake" required=""><label class="form-check-label" for="formCheck-4">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-3" name="story1" value="1" required=""><label class="form-check-label" for="formCheck-3">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-4" name="story1" value="0" required=""><label class="form-check-label" for="formCheck-4">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -67,8 +67,8 @@
                                 <div>
                                     <h5 class="fw-bold">Most Brilliant Ways Elon Musk Plans To Make Twitter Profitable</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-21" name="story7" value="real" required=""><label class="form-check-label" for="formCheck-21">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-22" name="story7" value="fake" required=""><label class="form-check-label" for="formCheck-22">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-21" name="story7" value="1" required=""><label class="form-check-label" for="formCheck-21">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-22" name="story7" value="0" required=""><label class="form-check-label" for="formCheck-22">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -78,8 +78,8 @@
                                 <div>
                                     <h5 class="fw-bold">Scientists have taught spinach to send emails and it could warn us about climate change<br></h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-15" name="story4" value="real" required=""><label class="form-check-label" for="formCheck-15">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-16" name="story4" value="fake" required=""><label class="form-check-label" for="formCheck-16">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-15" name="story4" value="1" required=""><label class="form-check-label" for="formCheck-15">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-16" name="story4" value="0" required=""><label class="form-check-label" for="formCheck-16">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -89,8 +89,8 @@
                                 <div>
                                     <h5 class="fw-bold">Obama Claims He’s Still President After Seeing How Susceptible Voters Are To Conspiracy Theories</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-19" name="story11" value="real" required=""><label class="form-check-label" for="formCheck-19">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-20" name="story11" value="fake" required=""><label class="form-check-label" for="formCheck-20">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-19" name="story11" value="1" required=""><label class="form-check-label" for="formCheck-19">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-20" name="story11" value="0" required=""><label class="form-check-label" for="formCheck-20">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -100,8 +100,8 @@
                                 <div>
                                     <h5 class="fw-bold">Nonsense paper written by iOS autocomplete accepted for conference</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-5" name="story2" value="real" required=""><label class="form-check-label" for="formCheck-5">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-6" name="story2" value="fake" required=""><label class="form-check-label" for="formCheck-6">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-5" name="story2" value="1" required=""><label class="form-check-label" for="formCheck-5">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-6" name="story2" value="0" required=""><label class="form-check-label" for="formCheck-6">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -111,8 +111,8 @@
                                 <div>
                                     <h5 class="fw-bold">Oxfordshire County Council's vegan lunches to continue after motion fails</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-17" name="story5" value="real" required=""><label class="form-check-label" for="formCheck-17">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-18" name="story5" value="fake" required=""><label class="form-check-label" for="formCheck-18">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-17" name="story5" value="1" required=""><label class="form-check-label" for="formCheck-17">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-18" name="story5" value="0" required=""><label class="form-check-label" for="formCheck-18">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -122,8 +122,8 @@
                                 <div>
                                     <h5 class="fw-bold">Usain Bolt Recalls Discovering Talent For Running Through Corporate Wellness Challenge</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-11" name="story8" value="real" required=""><label class="form-check-label" for="formCheck-11">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-12" name="story8" value="fake" required=""><label class="form-check-label" for="formCheck-12">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-11" name="story8" value="1" required=""><label class="form-check-label" for="formCheck-11">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-12" name="story8" value="0" required=""><label class="form-check-label" for="formCheck-12">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -133,8 +133,8 @@
                                 <div>
                                     <h5 class="fw-bold">Tesla recalls 40,000 cars over power-steering fault</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-13" name="story6" value="real" required=""><label class="form-check-label" for="formCheck-13">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-14" name="story6" value="fake" required=""><label class="form-check-label" for="formCheck-14">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-13" name="story6" value="1" required=""><label class="form-check-label" for="formCheck-13">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-14" name="story6" value="0" required=""><label class="form-check-label" for="formCheck-14">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -144,8 +144,8 @@
                                 <div>
                                     <h5 class="fw-bold">No after work e-mails please. French ordered to ignore the boss after 6pm</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-9" name="story9" value="real" required=""><label class="form-check-label" for="formCheck-9">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-10" name="story9" value="fake" required=""><label class="form-check-label" for="formCheck-10">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-9" name="story9" value="1" required=""><label class="form-check-label" for="formCheck-9">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-10" name="story9" value="0" required=""><label class="form-check-label" for="formCheck-10">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -155,8 +155,8 @@
                                 <div>
                                     <h5 class="fw-bold">World Hunger Activists Throw Oil On Pelican To Protest Climate Activists Wasting Soup</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-7" name="story12" value="real" required=""><label class="form-check-label" for="formCheck-7">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-8" name="story12" value="fake" required=""><label class="form-check-label" for="formCheck-8">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-7" name="story12" value="1" required=""><label class="form-check-label" for="formCheck-7">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-8" name="story12" value="0" required=""><label class="form-check-label" for="formCheck-8">Fake</label></div>
                             </div>
                         </div>
                     </div>

Clean Design Site/cluttered.html

@@ -24,7 +24,7 @@
             </div>
         </div>
     </header>
-    <form>
+    <form action="assets/php/cluttered.php" method="post">
         <section style="background: linear-gradient(var(--bs-yellow), var(--bs-purple) 9%, var(--bs-blue) 13%, var(--bs-pink) 28%, var(--bs-blue) 63%, var(--bs-green) 93%, var(--bs-red));">
             <div class="container py-4 py-xl-5" style="padding: 0;">
                 <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
@@ -34,8 +34,8 @@
                                 <div>
                                     <h5 class="fw-bold">National Park Service Asks Visitors to Please Stop Licking Toads</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-1" value="real" name="story3" required=""><label class="form-check-label" for="formCheck-1">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-2" value="fake" name="story3" required=""><label class="form-check-label" for="formCheck-2">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-1" value="1" name="story3" required=""><label class="form-check-label" for="formCheck-1">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-2" value="0" name="story3" required=""><label class="form-check-label" for="formCheck-2">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -45,8 +45,8 @@
                                 <div>
                                     <h5 class="fw-bold">Disney Wins Emmy For Best Profits</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-23" name="story10" value="real" required=""><label class="form-check-label" for="formCheck-23">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-24" name="story10" value="fake" required=""><label class="form-check-label" for="formCheck-24">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-23" name="story10" value="1" required=""><label class="form-check-label" for="formCheck-23">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-24" name="story10" value="0" required=""><label class="form-check-label" for="formCheck-24">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -59,8 +59,8 @@
                                 <div>
                                     <h5 class="fw-bold">Beer Lubricated the Rise of Civilization, Study Suggests</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-3" name="story1" value="real" required=""><label class="form-check-label" for="formCheck-3">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-4" name="story1" value="fake" required=""><label class="form-check-label" for="formCheck-4">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-3" name="story1" value="1" required=""><label class="form-check-label" for="formCheck-3">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-4" name="story1" value="0" required=""><label class="form-check-label" for="formCheck-4">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -73,8 +73,8 @@
                                 <div>
                                     <h5 class="fw-bold">Most Brilliant Ways Elon Musk Plans To Make Twitter Profitable</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-35" name="story7" value="real" required=""><label class="form-check-label" for="formCheck-35">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-36" name="story7" value="fake" required=""><label class="form-check-label" for="formCheck-36">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-35" name="story7" value="1" required=""><label class="form-check-label" for="formCheck-35">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-36" name="story7" value="0" required=""><label class="form-check-label" for="formCheck-36">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -87,8 +87,8 @@
                                 <div>
                                     <h5 class="fw-bold">Scientists have taught spinach to send emails and it could warn us about climate change<br></h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-27" name="story4" value="real" required=""><label class="form-check-label" for="formCheck-27">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-28" name="story4" value="fake" required=""><label class="form-check-label" for="formCheck-28">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-27" name="story4" value="1" required=""><label class="form-check-label" for="formCheck-27">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-28" name="story4" value="0" required=""><label class="form-check-label" for="formCheck-28">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -98,8 +98,8 @@
                                 <div>
                                     <h5 class="fw-bold">Obama Claims He’s Still President After Seeing How Susceptible Voters Are To Conspiracy Theories</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-19" name="story11" value="real" required=""><label class="form-check-label" for="formCheck-19">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-20" name="story11" value="fake" required=""><label class="form-check-label" for="formCheck-20">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-19" name="story11" value="1" required=""><label class="form-check-label" for="formCheck-19">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-20" name="story11" value="0" required=""><label class="form-check-label" for="formCheck-20">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -109,8 +109,8 @@
                                 <div>
                                     <h5 class="fw-bold">Nonsense paper written by iOS autocomplete accepted for conference</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-5" name="story2" value="real" required=""><label class="form-check-label" for="formCheck-5">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-6" name="story2" value="fake" required=""><label class="form-check-label" for="formCheck-6">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-5" name="story2" value="1" required=""><label class="form-check-label" for="formCheck-5">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-6" name="story2" value="0" required=""><label class="form-check-label" for="formCheck-6">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -123,8 +123,8 @@
                                 <div>
                                     <h5 class="fw-bold">Oxfordshire County Council's vegan lunches to continue after motion fails</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-17" name="story5" value="real" required=""><label class="form-check-label" for="formCheck-17">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-18" name="story5" value="fake" required=""><label class="form-check-label" for="formCheck-18">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-17" name="story5" value="1" required=""><label class="form-check-label" for="formCheck-17">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-18" name="story5" value="0" required=""><label class="form-check-label" for="formCheck-18">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -137,8 +137,8 @@
                                 <div>
                                     <h5 class="fw-bold">Usain Bolt Recalls Discovering Talent For Running Through Corporate Wellness Challenge</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-31" name="story8" value="real" required=""><label class="form-check-label" for="formCheck-31">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-32" name="story8" value="fake" required=""><label class="form-check-label" for="formCheck-32">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-31" name="story8" value="1" required=""><label class="form-check-label" for="formCheck-31">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-32" name="story8" value="0" required=""><label class="form-check-label" for="formCheck-32">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -148,8 +148,8 @@
                                 <div>
                                     <h5 class="fw-bold">Tesla recalls 40,000 cars over power-steering fault</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-13" name="story6" value="real" required=""><label class="form-check-label" for="formCheck-13">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-14" name="story6" value="fake" required=""><label class="form-check-label" for="formCheck-14">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-13" name="story6" value="1" required=""><label class="form-check-label" for="formCheck-13">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-14" name="story6" value="0" required=""><label class="form-check-label" for="formCheck-14">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -162,8 +162,8 @@
                                 <div>
                                     <h5 class="fw-bold">No after work e-mails please. French ordered to ignore the boss after 6pm</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-9" name="story9" value="real" required=""><label class="form-check-label" for="formCheck-9">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-10" name="story9" value="fake" required=""><label class="form-check-label" for="formCheck-10">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-9" name="story9" value="1" required=""><label class="form-check-label" for="formCheck-9">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-10" name="story9" value="0" required=""><label class="form-check-label" for="formCheck-10">Fake</label></div>
                             </div>
                         </div>
                     </div>
@@ -173,8 +173,8 @@
                                 <div>
                                     <h5 class="fw-bold">World Hunger Activists Throw Oil On Pelican To Protest Climate Activists Wasting Soup</h5>
                                 </div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-7" name="story12" value="real" required=""><label class="form-check-label" for="formCheck-7">Real</label></div>
-                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-8" name="story12" value="fake" required=""><label class="form-check-label" for="formCheck-8">Fake</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-7" name="story12" value="1" required=""><label class="form-check-label" for="formCheck-7">Real</label></div>
+                                <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-8" name="story12" value="0" required=""><label class="form-check-label" for="formCheck-8">Fake</label></div>
                             </div>
                         </div>
                     </div>