Problem: No calculation/validation on ICO Details page (issue fractal…

…ide#188).

Solution: Add calculation for ADA price and validation for terms & conditions and user answer.

conf.nix

@@ -16,7 +16,6 @@ rec {
     lib.bootstrap = { enable = true; version = "3.3.7"; };
     lib.font-awesome = { enable = true; version = "4.7.0"; };
     lib.googlefonts = [ "Nunito+Sans:400,900" ];
-    lib.jquery = { enable = true; version = "3.1.1"; };
     lib.mathjax = { enable = true; version = "2.7.5"; };
   };
 }

content/ico/details.md

@@ -158,29 +158,42 @@
                             </p>
                         </div>
                     </div>
+                    <div class="row">
+                        <div class="col-md-1 col-xs-2 text-right">
+                            <label>
+                                <input type="checkbox" />
+                                <span></span>
+                            </label>
+                        </div>
+                        <div class="col-md-11 col-xs-10">
+                            <p>
+                                I agree not to send ADA directly from a hardware wallet as I will not be able to extract the private key from the device and will never be able to clain my LUCEO.
+                            </p>
+                        </div>
+                    </div>
                 </div>
                 <div class="panel-body text-center">
                     <form class="form-horizontal light_blue_box">
-                        <h2 class="sub_heading_blue">What is the ADA price (p) of 1 LUCEO at epoch <span id="epoch"></span> (e)?</h2>
+                        <h2 class="sub_heading_blue">What is the ADA price (p) of 1 LUCEO at epoch (<val id="epoch">e</val>)?</h2>
                         <div class="form-group form-group-lg">
                             <div class="col-md-offset-2 col-md-8 col-xs-12">
-                                <input type="text" class="form-control input-lg" placeholder="Enter your answer" />
+                                <input type="text" class="form-control input-lg" id="answer" placeholder="Enter your answer" />
                             </div>
                         </div>
                     </form>
                 </div>
                 <div class="panel-body">
                     <div class="row">
                         <div class="col-md-12 col-xs-12">
-                            <p>
+                            <p id="warning_message">
                                 Please make sure that you've checked all the checkboxes above and answered the challenge question correctly before submitting this form to get the ADA presale address.
                             </p>
                         </div>
                     </div>
                     <div class="row">
                         <div class="col-md-offset-3 col-md-6 col-xs-offset-1 col-xs-10">
                             <p>
-                                <button class="btn btn-lg btn-default btn-block" type="button" data-toggle="modal" data-target="#myModal">Submit</button>
+                                <button class="btn btn-lg btn-default btn-block" type="button" data-toggle="modal" data-target="#myModal" id="btnSubmit">Submit</button>
                             </p>
                         </div>
                     </div>
@@ -203,3 +216,5 @@
         </div>
     </div>
 </div>
+
+<script src="/js/ico.js"></script>

themes/fractalide/files/css/custom.css

@@ -942,7 +942,7 @@ section#ico-details .header_gradient {
   vertical-align: middle;
 }
 
-.checklist input[type=checkbox].has-error ~ span {
+.checklist input[type=checkbox].error ~ span {
   border: 1px solid #ed7a7f;
 }
 
@@ -962,3 +962,8 @@ section#ico-details .header_gradient {
   content: '\f00c';
 }
 */
+.sub_heading_blue val {
+    font-size: 24px;
+    color: #58b4cd;
+    margin-bottom: 20px;
+}

themes/fractalide/files/js/ico.js

@@ -0,0 +1,43 @@
+$(document).ready(function(){
+
+    generateRandomEpoch();
+
+    $('#myModal').on('show.bs.modal', function (e) {
+        if(!isValidAnswer()) {
+            e.preventDefault();
+            generateRandomEpoch();
+        }
+    });
+
+});
+
+function generateRandomEpoch(){
+    var e = Math.floor(Math.random() * 42);
+    $('#epoch').html(e);
+}
+
+function calculateP(e) {
+    var x = 0.01;
+    var d = 75;
+    var n = 41;
+    var p = x * 0.01 * (100 - d + e / (n - 1) * d);
+    return p.toFixed(4);
+}
+
+function isValidAnswer() {
+    var valid = true;
+
+    $('.checklist input[type=checkbox]').each(function(i) {
+        valid &= $(this).is(':checked');
+        $(this).toggleClass('error', $(this).is(':not(:checked)'));
+    });
+
+    var p = calculateP(parseInt($('#epoch').html()));
+    var answer = (parseFloat($('#answer').val()) || 0).toFixed(4);
+    valid &= answer === p
+    $('#answer').parents('div.form-group').toggleClass('has-error', answer !== p);
+
+    $('#warning_message').toggleClass('text-danger', !valid);
+
+    return valid;
+}

themes/fractalide/templates/partials/head/meta.nix

@@ -14,6 +14,7 @@ in
       gtag('js', new Date());
       gtag('config', 'UA-120734485-1');
     </script>
+    <script crossorigin="anonymous" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
     <meta charset="utf-8">
     <meta name="robots" content="all,follow">
     <meta name="googlebot" content="index,follow,snippet,archive">