All examples By author By category About

erikaris

Full window Github gist

Test Landing Page

<!doctype html>
<html lang="en">

<head>
  <title>Root Error Solver</title>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Mobland - Mobile App Landing Page Template">
  <meta name="keywords" content="HTML5, bootstrap, mobile, app, landing, ios, android, responsive">

<link rel="dns-prefetch" href="//fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css">
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
  
  <link href="style.css" rel="stylesheet">

.svg-content-responsive {
      display: inline-block;
      position: absolute;
      top: 10px;
      left: 0;
    }

div#canvas {
      background-color: white;
      border: 1px solid #999;
      border-radius: 5px;
      position: relative;
    }

div#canvas .description {
      color: #777;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #EEE;
      border-top: 1px solid #999;
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
      padding: 5px;
    }

svg.rule {
      opacity: 1;
    }

.edge line {
      stroke: rgb(153, 153, 153);
      stroke-width: 1.5px;
      pointer-events: none;
    }

marker {
      fill: rgb(99, 99, 99);
      stroke: rgb(153, 153, 153);
    }

.node circle {
      stroke-width: 2;
      stroke: rgb(153, 153, 153);
      fill: rgb(153, 153, 153);
      cursor: pointer;
    }
  </style>
</head>

<div class="nav-menu fixed-top is-scrolling">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <nav class="navbar navbar-dark navbar-expand-lg">
            <a class="navbar-brand" href="index.html"><img src="https://github.com/soedomoto/soedomoto.github.io/raw/master/images/logo.png" class="img-fluid" alt="logo"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
              aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
            <div class="collapse navbar-collapse" id="navbar">
              <ul class="navbar-nav ml-auto">
                <li class="nav-item"> <a class="nav-link" href="#home">HOME <span class="sr-only">(current)</span></a> </li>
                <li class="nav-item"> <a class="nav-link active" href="#features">FEATURES</a> </li>
                <li class="nav-item"> <a class="nav-link" href="#gallery">GALLERY</a> </li>
                <li class="nav-item"> <a class="nav-link" href="#pricing">PRICING</a> </li>
                <li class="nav-item"> <a class="nav-link" href="#contact">CONTACT</a> </li>
                <li class="nav-item"><a href="#" class="btn btn-outline-light my-3 my-sm-0 ml-lg-3">Download</a></li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </div>

<header class="bg-gradient" id="home">
    <div class="container mt-5">
      <h1>Mobile App Landing Page Template</h1>
      <p class="tagline">The one and only solution for any kind of mobila app landing needs. Just change the screenshots and texts and you are good to go. </p>
    </div>
    <div class="img-holder mt-3"><img src="https://github.com/soedomoto/soedomoto.github.io/raw/master/images/iphonex.png" alt="phone" class="img-fluid"></div>
  </header>

<div class="section-title">
        <small>HIGHLIGHTS</small>
        <h3>Features you love</h3>
      </div>

<div class="row">
        <div class="col-12 col-lg-4">
          <div class="card features">
            <div class="card-body">
              <div class="media">
                <span class="ti-face-smile gradient-fill ti-3x mr-3"></span>
                <div class="media-body">
                  <h4 class="card-title">Simple</h4>
                  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, urna eu pellentesque </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-4">
          <div class="card features">
            <div class="card-body">
              <div class="media">
                <span class="ti-settings gradient-fill ti-3x mr-3"></span>
                <div class="media-body">
                  <h4 class="card-title">Customize</h4>
                  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, urna eu pellentesque </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-4">
          <div class="card features">
            <div class="card-body">
              <div class="media">
                <span class="ti-lock gradient-fill ti-3x mr-3"></span>
                <div class="media-body">
                  <h4 class="card-title">Secure</h4>
                  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, urna eu pellentesque </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

</div>

</div>

<div class="section light-bg">
    <div class="container">
      <div class="section-title">
        <small>FEATURES</small>
        <h3>Do more with our app</h3>
      </div>

<div id="questionnaire">
        <ul class="nav nav-tabs nav-justified" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#demography">Block IV </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#education">Block V</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#travel-crime">Block VI </a>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane fade show active" id="demography">
            <div class="d-flex flex-column flex-lg-row">
              
              <div class="container">
                <div class="row">
                  <h4 class="text-center">BLOCK IV. DEMOGRAPHY, BIRTH CERTIFICATE, AND EARLY CHILD EDUCATION</h4>
                  <div class="table-responsive">
                    <table class="table table-bordered table-hover table-condensed">
                      <thead>
                        <tr align="center" valign="middle !important">
                          <th rowspan="2"><label class="c-401">No</label></th>
                          <th rowspan="2">Household Members</th>
                          <th rowspan="2">Family relations </th>
                          <th rowspan="2">Marital status</th>
                          <th rowspan="2">Gender</th>
                          <th rowspan="2">Birth</th>
                          <th rowspan="2">Age (write 97 if age &gt;= 97)</th>
                          <th rowspan="2">If ever married (404=2), does/did the spouse live in this household? </th>
                          <th rowspan="2">Age at first married (if 404=2,3,4)</th>
                          <th colspan="2"> For person age 0 - 17 yo </th>
                          <th colspan="2"> For person age 0 - 10 yo </th>
                        </tr>
                        <tr>
                          <th>Have a birth certificate</th>
                          <th>If does not have birth certificate (410=5), why?</th>
                          <th>Ever attended pre-school?</th>
                          <th>What type of pre-school (if 412=1,2,3), </th>
                        </tr>
                        <tr align="center" style="font-size: 80%">
                          <th>401</th>
                          <th>402</th>
                          <th>403</th>
                          <th>404</th>
                          <th>405</th>
                          <th>406</th>
                          <th>407</th>
                          <th>408</th>
                          <th>409</th>
                          <th>410</th>
                          <th>411</th>
                          <th>412</th>
                          <th>413</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><label id="flabel" name="R401">1</label></td>
                          <td><input id="fname" name="R402" required="required" type="text"></td>
                          <td><input id="fname" name="R403" required="required" type="text"></td>
                          <td><input id="fname" name="R404" required="required" type="text"></td>
                          <td><input id="fname" name="R405" required="required" type="text"></td>
                          <td><input id="fname" name="R406" required="required" type="text"></td>
                          <td><input id="fname" name="R407" required="required" type="text"></td>
                          <td><input id="fname" name="R408" required="required" type="text"></td>
                          <td><input id="fname" name="R409" required="required" type="text"></td>
                          <td><input id="fname" name="R410" required="required" type="text"></td>
                          <td><input id="fname" name="R411" required="required" type="text"></td>
                          <td><input id="fname" name="R412" required="required" type="text"></td>
                          <td><input id="fname" name="R413" required="required" type="text"></td>
                        </tr>
                        <tr>
                          <td><label id="flabel" name="R401">2</label></td>
                          <td><input id="fname" name="R402" required="required" type="text"></td>
                          <td><input id="fname" name="R403" required="required" type="text"></td>
                          <td><input id="fname" name="R404" required="required" type="text"></td>
                          <td><input id="fname" name="R405" required="required" type="text"></td>
                          <td><input id="fname" name="R406" required="required" type="text"></td>
                          <td><input id="fname" name="R407" required="required" type="text"></td>
                          <td><input id="fname" name="R408" required="required" type="text"></td>
                          <td><input id="fname" name="R409" required="required" type="text"></td>
                          <td><input id="fname" name="R410" required="required" type="text"></td>
                          <td><input id="fname" name="R411" required="required" type="text"></td>
                          <td><input id="fname" name="R412" required="required" type="text"></td>
                          <td><input id="fname" name="R413" required="required" type="text"></td>
                        </tr>
                        <tr>
                          <td><label id="flabel" name="R401">3</label></td>
                          <td><input id="fname" name="R402" required="required" type="text"></td>
                          <td><input id="fname" name="R403" required="required" type="text"></td>
                          <td><input id="fname" name="R404" required="required" type="text"></td>
                          <td><input id="fname" name="R405" required="required" type="text"></td>
                          <td><input id="fname" name="R406" required="required" type="text"></td>
                          <td><input id="fname" name="R407" required="required" type="text"></td>
                          <td><input id="fname" name="R408" required="required" type="text"></td>
                          <td><input id="fname" name="R409" required="required" type="text"></td>
                          <td><input id="fname" name="R410" required="required" type="text"></td>
                          <td><input id="fname" name="R411" required="required" type="text"></td>
                          <td><input id="fname" name="R412" required="required" type="text"></td>
                          <td><input id="fname" name="R413" required="required" type="text"></td>
                        </tr>
                        <tr>
                          <td><label id="flabel" name="R401">4</label></td>
                          <td><input id="fname" name="R402" required="required" type="text"></td>
                          <td><input id="fname" name="R403" required="required" type="text"></td>
                          <td><input id="fname" name="R404" required="required" type="text"></td>
                          <td><input id="fname" name="R405" required="required" type="text"></td>
                          <td><input id="fname" name="R406" required="required" type="text"></td>
                          <td><input id="fname" name="R407" required="required" type="text"></td>
                          <td><input id="fname" name="R408" required="required" type="text"></td>
                          <td><input id="fname" name="R409" required="required" type="text"></td>
                          <td><input id="fname" name="R410" required="required" type="text"></td>
                          <td><input id="fname" name="R411" required="required" type="text"></td>
                          <td><input id="fname" name="R412" required="required" type="text"></td>
                          <td><input id="fname" name="R413" required="required" type="text"></td>
                        </tr>
                        <tr>
                          <td><label id="flabel" name="R401">5</label></td>
                          <td><input id="fname" name="R402" required="required" type="text"></td>
                          <td><input id="fname" name="R403" required="required" type="text"></td>
                          <td><input id="fname" name="R404" required="required" type="text"></td>
                          <td><input id="fname" name="R405" required="required" type="text"></td>
                          <td><input id="fname" name="R406" required="required" type="text"></td>
                          <td><input id="fname" name="R407" required="required" type="text"></td>
                          <td><input id="fname" name="R408" required="required" type="text"></td>
                          <td><input id="fname" name="R409" required="required" type="text"></td>
                          <td><input id="fname" name="R410" required="required" type="text"></td>
                          <td><input id="fname" name="R411" required="required" type="text"></td>
                          <td><input id="fname" name="R412" required="required" type="text"></td>
                          <td><input id="fname" name="R413" required="required" type="text"></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="education">
            <div class="d-flex flex-column flex-lg-row">
              <div class="container">
                <div class="row">
                  <h4 class="text-center">BLOCK V. EDUCATION</h4>
                  <div class="table-responsive">
                    <table class="table table-bordered table-hover" width="100%">
                      <thead>
                        <tr>
                          <th colspan="3"> Copy the answers from Block IV </th>
                          <th colspan="9"> Only if age &gt;= 5 yo</th>
                          <th colspan="3"> Only if age 5-24 yo </th>
                        </tr>
                        <tr align="center">
                          <th rowspan="2">No</th>
                          <th rowspan="2">Household Members</th>
                          <th rowspan="2">Age </th>
                          <th colspan="3">Literacy</th>
                          <th rowspan="2">Attend any education?</th>
                          <th rowspan="2">Highest level of education attended?</th>
                          <th rowspan="2">Highest grade attended?</th>
                          <th rowspan="2">Highest school certificate?</th>
                          <th rowspan="2">The school location?</th>
                          <th rowspan="2"="2"=""> If currently not in school (507=3), the year you quit the school? </th>
                          <th colspan="3"> If ever attended a school (507=2 or 3) </th>
                        </tr>
                        <tr>
                          <th>Latin Letters? <br> 1. Yes <br> 5. No</th>
                          <th>Arabic Letters? <br> 1. Yes <br> 5. No</th>
                          <th>Other Letters?</th>
                          <th>Active student in the previous school year?</th>
                          <th>If 513=2, what level of education did you attend?</th>
                          <th>what grade were you in the previous school year?</th>
                        </tr>
                        <tr align="center" style="font-size: 80%">
                          <th>501</th>
                          <th>502</th>
                          <th>503</th>
                          <th>504</th>
                          <th>505</th>
                          <th>506</th>
                          <th>507</th>
                          <th>508</th>
                          <th>509</th>
                          <th>510</th>
                          <th>511</th>
                          <th>512</th>
                          <th>513</th>
                          <th>514</th>
                          <th>515</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><input id="fname" name="R501" required="required" type="text"></td>
                          <td><input id="fname" name="R502" required="required" type="text"></td>
                          <td><input id="fname" name="R503" required="required" type="text"></td>
                          <td><input id="fname" name="R504" required="required" type="text"></td>
                          <td><input id="fname" name="R505" required="required" type="text"></td>
                          <td><input id="fname" name="R506" required="required" type="text"></td>
                          <td><input id="fname" name="R507" required="required" type="text"></td>
                          <td><input id="fname" name="R508" required="required" type="text"></td>
                          <td><input id="fname" name="R509" required="required" type="text"></td>
                          <td><input id="fname" name="R510" required="required" type="text"></td>
                          <td><input id="fname" name="R511" required="required" type="text"></td>
                          <td><input id="fname" name="R512" required="required" type="text"></td>
                          <td><input id="fname" name="R513" required="required" type="text"></td>
                          <td><input id="fname" name="R514" required="required" type="text"></td>
                          <td><input id="fname" name="R515" required="required" type="text"></td>
                        </tr>
                        <tr>
                          <td><input id="fname" name="R501" required="required" type="text"></td>
                          <td><input id="fname" name="R502" required="required" type="text"></td>
                          <td><input id="fname" name="R503" required="required" type="text"></td>
                          <td><input id="fname" name="R504" required="required" type="text"></td>
                          <td><input id="fname" name="R505" required="required" type="text"></td>
                          <td><input id="fname" name="R506" required="required" type="text"></td>
                          <td><input id="fname" name="R507" required="required" type="text"></td>
                          <td><input id="fname" name="R508" required="required" type="text"></td>
                          <td><input id="fname" name="R509" required="required" type="text"></td>
                          <td><input id="fname" name="R510" required="required" type="text"></td>
                          <td><input id="fname" name="R511" required="required" type="text"></td>
                          <td><input id="fname" name="R512" required="required" type="text"></td>
                          <td><input id="fname" name="R513" required="required" type="text"></td>
                          <td><input id="fname" name="R514" required="required" type="text"></td>
                          <td><input id="fname" name="R515" required="required" type="text"></td>
                        </tr>
                        <tr>
                          <td><input id="fname" name="R501" required="required" type="text"></td>
                          <td><input id="fname" name="R502" required="required" type="text"></td>
                          <td><input id="fname" name="R503" required="required" type="text"></td>
                          <td><input id="fname" name="R504" required="required" type="text"></td>
                          <td><input id="fname" name="R505" required="required" type="text"></td>
                          <td><input id="fname" name="R506" required="required" type="text"></td>
                          <td><input id="fname" name="R507" required="required" type="text"></td>
                          <td><input id="fname" name="R508" required="required" type="text"></td>
                          <td><input id="fname" name="R509" required="required" type="text"></td>
                          <td><input id="fname" name="R510" required="required" type="text"></td>
                          <td><input id="fname" name="R511" required="required" type="text"></td>
                          <td><input id="fname" name="R512" required="required" type="text"></td>
                          <td><input id="fname" name="R513" required="required" type="text"></td>
                          <td><input id="fname" name="R514" required="required" type="text"></td>
                          <td><input id="fname" name="R515" required="required" type="text"></td>
                        </tr>
                        <tr>
                          <td><input id="fname" name="R501" required="required" type="text"></td>
                          <td><input id="fname" name="R502" required="required" type="text"></td>
                          <td><input id="fname" name="R503" required="required" type="text"></td>
                          <td><input id="fname" name="R504" required="required" type="text"></td>
                          <td><input id="fname" name="R505" required="required" type="text"></td>
                          <td><input id="fname" name="R506" required="required" type="text"></td>
                          <td><input id="fname" name="R507" required="required" type="text"></td>
                          <td><input id="fname" name="R508" required="required" type="text"></td>
                          <td><input id="fname" name="R509" required="required" type="text"></td>
                          <td><input id="fname" name="R510" required="required" type="text"></td>
                          <td><input id="fname" name="R511" required="required" type="text"></td>
                          <td><input id="fname" name="R512" required="required" type="text"></td>
                          <td><input id="fname" name="R513" required="required" type="text"></td>
                          <td><input id="fname" name="R514" required="required" type="text"></td>
                          <td><input id="fname" name="R515" required="required" type="text"></td>
                        </tr>
                        <tr>
                          <td><input id="fname" name="R501" required="required" type="text"></td>
                          <td><input id="fname" name="R502" required="required" type="text"></td>
                          <td><input id="fname" name="R503" required="required" type="text"></td>
                          <td><input id="fname" name="R504" required="required" type="text"></td>
                          <td><input id="fname" name="R505" required="required" type="text"></td>
                          <td><input id="fname" name="R506" required="required" type="text"></td>
                          <td><input id="fname" name="R507" required="required" type="text"></td>
                          <td><input id="fname" name="R508" required="required" type="text"></td>
                          <td><input id="fname" name="R509" required="required" type="text"></td>
                          <td><input id="fname" name="R510" required="required" type="text"></td>
                          <td><input id="fname" name="R511" required="required" type="text"></td>
                          <td><input id="fname" name="R512" required="required" type="text"></td>
                          <td><input id="fname" name="R513" required="required" type="text"></td>
                          <td><input id="fname" name="R514" required="required" type="text"></td>
                          <td><input id="fname" name="R515" required="required" type="text"></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>

</div>
          </div>
          <div class="tab-pane fade" id="travel-crime">
            <div class="d-flex flex-column flex-lg-row">
              <div class="container">
                <div class="row">
                  <h4 class="text-center">BLOCK VI. TRAVELLING AND CRIME INFORMATION</h4>
                  <div class="table-responsive">
                    <table class="table table-bordered table-hover" width="100%">
                      <thead>
                        <tr align="center">
                          <th colspan="2" rowspan="3"> Copy the answers from Block IV </th>
                          <th rowspan="4"> Ever did a commercial tourism/travelling in the past 6 months?</th>
                          <th colspan="2" rowspan="3"> Number of vacations taken during </th>
                          <th colspan="2" rowspan="3"> About the last trip </th>
                          <th rowspan="4"> Between March 2015 - February 2016: Did you ever become a victim of crime?</th>
                          <th colspan="12"> If 608=1 </th>
                        </tr>
                        <tr align="center">
                          <th colspan="10"> How many times and where did it happen? </th>
                          <th rowspan="3"> Number of crimes reported to the police </th>
                          <th rowspan="3"> If 619&gt;0, Number of reported crimes investigated by the police? </th>
                        </tr>
                        <tr>
                          <th colspan="2"> Theft </th>
                          <th colspan="2"> Persecution/Violance</th>
                          <th colspan="2"> Robbery </th>
                          <th colspan="2"> Sexual Assault </th>
                          <th colspan="2"> Others </th>
                        </tr>
                        <tr>
                          <th> Number </th>
                          <th> Location </th>
                          <th> Number </th>
                          <th> Location </th>
                          <th> Number </th>
                          <th> Location </th>
                          <th> Number </th>
                          <th> Location </th>
                          <th> Number </th>
                          <th> Location </th>
                        </tr>
                        <tr align="center" style="font-size: 80%">
                          <th>601</th>
                          <th>602</th>
                          <th>603</th>
                          <th>604</th>
                          <th>605</th>
                          <th>606</th>
                          <th>607</th>
                          <th>608</th>
                          <th>609</th>
                          <th>610</th>
                          <th>611</th>
                          <th>612</th>
                          <th>613</th>
                          <th>614</th>
                          <th>615</th>
                          <th>616</th>
                          <th>617</th>
                          <th>618</th>
                          <th>619</th>
                          <th>620</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><input id="fname" name="R601" required="required" type="text"></td>
                          <td><input id="fname" name="R602" required="required" type="text"></td>
                          <td><input id="fname" name="R603" required="required" type="text"></td>
                          <td><input id="fname" name="R604" required="required" type="text"></td>
                          <td><input id="fname" name="R605" required="required" type="text"></td>
                          <td><input id="fname" name="R606" required="required" type="text"></td>
                          <td><input id="fname" name="R607" required="required" type="text"></td>
                          <td><input id="fname" name="R608" required="required" type="text"></td>
                          <td><input id="fname" name="R609" required="required" type="text"></td>
                          <td><input id="fname" name="R610" required="required" type="text"></td>
                          <td><input id="fname" name="R611" required="required" type="text"></td>
                          <td><input id="fname" name="R612" required="required" type="text"></td>
                          <td><input id="fname" name="R613" required="required" type="text"></td>
                          <td><input id="fname" name="R614" required="required" type="text"></td>
                          <td><input id="fname" name="R615" required="required" type="text"></td>
                          <td><input id="fname" name="R616" required="required" type="text"></td>
                          <td><input id="fname" name="R617" required="required" type="text"></td>
                          <td><input id="fname" name="R618" required="required" type="text"></td>
                          <td><input id="fname" name="R619" required="required" type="text"></td>
                          <td><input id="fname" name="R620" required="required" type="text"></td>
                        </tr>
                        <tr>
                          <td><input id="fname" name="R601" required="required" type="text"></td>
                          <td><input id="fname" name="R602" required="required" type="text"></td>
                          <td><input id="fname" name="R603" required="required" type="text"></td>
                          <td><input id="fname" name="R604" required="required" type="text"></td>
                          <td><input id="fname" name="R605" required="required" type="text"></td>
                          <td><input id="fname" name="R606" required="required" type="text"></td>
                          <td><input id="fname" name="R607" required="required" type="text"></td>
                          <td><input id="fname" name="R608" required="required" type="text"></td>
                          <td><input id="fname" name="R609" required="required" type="text"></td>
                          <td><input id="fname" name="R610" required="required" type="text"></td>
                          <td><input id="fname" name="R611" required="required" type="text"></td>
                          <td><input id="fname" name="R612" required="required" type="text"></td>
                          <td><input id="fname" name="R613" required="required" type="text"></td>
                          <td><input id="fname" name="R614" required="required" type="text"></td>
                          <td><input id="fname" name="R615" required="required" type="text"></td>
                          <td><input id="fname" name="R616" required="required" type="text"></td>
                          <td><input id="fname" name="R617" required="required" type="text"></td>
                          <td><input id="fname" name="R618" required="required" type="text"></td>
                          <td><input id="fname" name="R619" required="required" type="text"></td>
                          <td><input id="fname" name="R620" required="required" type="text"></td>
                        </tr>
                        <tr>
                          <td><input id="fname" name="R601" required="required" type="text"></td>
                          <td><input id="fname" name="R602" required="required" type="text"></td>
                          <td><input id="fname" name="R603" required="required" type="text"></td>
                          <td><input id="fname" name="R604" required="required" type="text"></td>
                          <td><input id="fname" name="R605" required="required" type="text"></td>
                          <td><input id="fname" name="R606" required="required" type="text"></td>
                          <td><input id="fname" name="R607" required="required" type="text"></td>
                          <td><input id="fname" name="R608" required="required" type="text"></td>
                          <td><input id="fname" name="R609" required="required" type="text"></td>
                          <td><input id="fname" name="R610" required="required" type="text"></td>
                          <td><input id="fname" name="R611" required="required" type="text"></td>
                          <td><input id="fname" name="R612" required="required" type="text"></td>
                          <td><input id="fname" name="R613" required="required" type="text"></td>
                          <td><input id="fname" name="R614" required="required" type="text"></td>
                          <td><input id="fname" name="R615" required="required" type="text"></td>
                          <td><input id="fname" name="R616" required="required" type="text"></td>
                          <td><input id="fname" name="R617" required="required" type="text"></td>
                          <td><input id="fname" name="R618" required="required" type="text"></td>
                          <td><input id="fname" name="R619" required="required" type="text"></td>
                          <td><input id="fname" name="R620" required="required" type="text"></td>
                        </tr>
                        <tr>
                          <td><input id="fname" name="R601" required="required" type="text"></td>
                          <td><input id="fname" name="R602" required="required" type="text"></td>
                          <td><input id="fname" name="R603" required="required" type="text"></td>
                          <td><input id="fname" name="R604" required="required" type="text"></td>
                          <td><input id="fname" name="R605" required="required" type="text"></td>
                          <td><input id="fname" name="R606" required="required" type="text"></td>
                          <td><input id="fname" name="R607" required="required" type="text"></td>
                          <td><input id="fname" name="R608" required="required" type="text"></td>
                          <td><input id="fname" name="R609" required="required" type="text"></td>
                          <td><input id="fname" name="R610" required="required" type="text"></td>
                          <td><input id="fname" name="R611" required="required" type="text"></td>
                          <td><input id="fname" name="R612" required="required" type="text"></td>
                          <td><input id="fname" name="R613" required="required" type="text"></td>
                          <td><input id="fname" name="R614" required="required" type="text"></td>
                          <td><input id="fname" name="R615" required="required" type="text"></td>
                          <td><input id="fname" name="R616" required="required" type="text"></td>
                          <td><input id="fname" name="R617" required="required" type="text"></td>
                          <td><input id="fname" name="R618" required="required" type="text"></td>
                          <td><input id="fname" name="R619" required="required" type="text"></td>
                          <td><input id="fname" name="R620" required="required" type="text"></td>
                        </tr>
                        <tr>
                          <td><input id="fname" name="R601" required="required" type="text"></td>
                          <td><input id="fname" name="R602" required="required" type="text"></td>
                          <td><input id="fname" name="R603" required="required" type="text"></td>
                          <td><input id="fname" name="R604" required="required" type="text"></td>
                          <td><input id="fname" name="R605" required="required" type="text"></td>
                          <td><input id="fname" name="R606" required="required" type="text"></td>
                          <td><input id="fname" name="R607" required="required" type="text"></td>
                          <td><input id="fname" name="R608" required="required" type="text"></td>
                          <td><input id="fname" name="R609" required="required" type="text"></td>
                          <td><input id="fname" name="R610" required="required" type="text"></td>
                          <td><input id="fname" name="R611" required="required" type="text"></td>
                          <td><input id="fname" name="R612" required="required" type="text"></td>
                          <td><input id="fname" name="R613" required="required" type="text"></td>
                          <td><input id="fname" name="R614" required="required" type="text"></td>
                          <td><input id="fname" name="R615" required="required" type="text"></td>
                          <td><input id="fname" name="R616" required="required" type="text"></td>
                          <td><input id="fname" name="R617" required="required" type="text"></td>
                          <td><input id="fname" name="R618" required="required" type="text"></td>
                          <td><input id="fname" name="R619" required="required" type="text"></td>
                          <td><input id="fname" name="R620" required="required" type="text"></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

<button id="btn_validate_questionnaire" class="btn btn-primary btn-lg btn-block">Validate</button>

</div>
  </div>

<div class="section" id="graph_rule_container">
    <div class="container">
      <div class="section-title">
        <small>THE RULE</small>
        <h3>Using Centrality Theory</h3>
      </div>

<div id="canvas">
        <span class="description">Rule Representation Graph</span>
        <svg class="jsnx rule"></svg>
      </div>
    </div>
  </div>

<div class="section light-bg" id="gallery">
    <div class="container">
      <div class="section-title">
        <small>GALLERY</small>
        <h3>App Screenshots</h3>
      </div>

</div>

</div>

<div class="section" id="pricing">
    <div class="container">
      <div class="section-title">
        <small>PRICING</small>
        <h3>Upgrade to Pro</h3>
      </div>

<div class="card-deck">
        <div class="card pricing">
          <div class="card-head">
            <small class="text-primary">PERSONAL</small>
            <span class="price">$14<sub>/m</sub></span>
          </div>
          <ul class="list-group list-group-flush">
            <div class="list-group-item">10 Projects</div>
            <div class="list-group-item">5 GB Storage</div>
            <div class="list-group-item">Basic Support</div>
            <div class="list-group-item"><del>Collaboration</del></div>
            <div class="list-group-item"><del>Reports and analytics</del></div>
          </ul>
          <div class="card-body">
            <a href="#" class="btn btn-primary btn-lg btn-block">Choose this Plan</a>
          </div>
        </div>
        <div class="card pricing popular">
          <div class="card-head">
            <small class="text-primary">FOR TEAMS</small>
            <span class="price">$29<sub>/m</sub></span>
          </div>
          <ul class="list-group list-group-flush">
            <div class="list-group-item">Unlimited Projects</div>
            <div class="list-group-item">100 GB Storage</div>
            <div class="list-group-item">Priority Support</div>
            <div class="list-group-item">Collaboration</div>
            <div class="list-group-item">Reports and analytics</div>
          </ul>
          <div class="card-body">
            <a href="#" class="btn btn-primary btn-lg btn-block">Choose this Plan</a>
          </div>
        </div>
        <div class="card pricing">
          <div class="card-head">
            <small class="text-primary">ENTERPRISE</small>
            <span class="price">$249<sub>/m</sub></span>
          </div>
          <ul class="list-group list-group-flush">
            <div class="list-group-item">Unlimited Projects</div>
            <div class="list-group-item">Unlimited Storage</div>
            <div class="list-group-item">Collaboration</div>
            <div class="list-group-item">Reports and analytics</div>
            <div class="list-group-item">Web hooks</div>
          </ul>
          <div class="card-body">
            <a href="#" class="btn btn-primary btn-lg btn-block">Choose this Plan</a>
          </div>
        </div>
      </div>

</div>

</div>

<div class="section pt-0">
    <div class="container">
      <div class="section-title">
        <small>FAQ</small>
        <h3>Frequently Asked Questions</h3>
      </div>

<div class="row pt-4">
        <div class="col-md-6">
          <h4 class="mb-3">Can I try before I buy?</h4>
          <p class="light-font mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, urna eu pellentesque pretium, nisi nisi fermentum enim, et sagittis dolor nulla vel sapien. Vestibulum sit amet mattis ante. </p>
          <h4 class="mb-3">What payment methods do you accept?</h4>
          <p class="light-font mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, urna eu pellentesque pretium, nisi nisi fermentum enim, et sagittis dolor nulla vel sapien. Vestibulum sit amet mattis ante. </p>

</div>
        <div class="col-md-6">
          <h4 class="mb-3">Can I change my plan later?</h4>
          <p class="light-font mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, urna eu pellentesque pretium, nisi nisi fermentum enim, et sagittis dolor nulla vel sapien. Vestibulum sit amet mattis ante. </p>
          <h4 class="mb-3">Do you have a contract?</h4>
          <p class="light-font mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, urna eu pellentesque pretium, nisi nisi fermentum enim, et sagittis dolor nulla vel sapien. Vestibulum sit amet mattis ante. </p>

</div>
      </div>
    </div>

</div>

<div class="box-icon"><span class="ti-mobile gradient-fill ti-3x"></span></div>
        <h2>Download Anywhere</h2>
        <p class="tagline">Available for all major mobile and desktop platforms. Rapidiously visualize optimal ROI rather than enterprise-wide methods of empowerment. </p>
        <div class="my-4">

<a href="#" class="btn btn-light"><img src="https://github.com/soedomoto/soedomoto.github.io/raw/master/images/appleicon.png" alt="icon"> App Store</a>
          <a href="#" class="btn btn-light"><img src="https://github.com/soedomoto/soedomoto.github.io/raw/master/images/playicon.png" alt="icon"> Google play</a>
        </div>
        <p class="text-primary"><small><i>*Works on iOS 10.0.5+, Android Kitkat and above. </i></small></p>
      </div>
    </div>

</div>

<div class="light-bg py-5" id="contact">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 text-center text-lg-left">
          <p class="mb-2"> <span class="ti-location-pin mr-2"></span> 1485 Pacific St, Brooklyn, NY 11216 USA</p>
          <div class=" d-block d-sm-inline-block">
            <p class="mb-2">
              <span class="ti-email mr-2"></span> <a class="mr-4" href="mailto:support@mobileapp.com">support@mobileapp.com</a>
            </p>
          </div>
          <div class="d-block d-sm-inline-block">
            <p class="mb-0">
              <span class="ti-headphone-alt mr-2"></span> <a href="tel:51836362800">518-3636-2800</a>
            </p>
          </div>

</div>
        <div class="col-lg-6">
          <div class="social-icons">
            <a href="#"><span class="ti-facebook"></span></a>
            <a href="#"><span class="ti-twitter-alt"></span></a>
            <a href="#"><span class="ti-instagram"></span></a>
          </div>
        </div>
      </div>

</div>

</div>
  
  <footer class="my-5 text-center">
    
    <p class="mb-2"><small>COPYRIGHT © 2017. ALL RIGHTS RESERVED. MOBAPP TEMPLATE BY <a href="https://colorlib.com">COLORLIB</a></small></p>

<small>
            <a href="#" class="m-2">PRESS</a>
            <a href="#" class="m-2">TERMS</a>
            <a href="#" class="m-2">PRIVACY</a>
        </small>
  </footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/owlcarousel2/2.2.1/owl.carousel.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sortable/1.4.0/sortable.min.js"></script>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="/emeeks/9915de8989e2a5c34652/7d22d8e4f05e944ced10408ae64579beff3c0858/jsnetworkx.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/eligrey/canvas-toblob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toblob.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/eligrey/filesaver.js/e9d941381475b5df8b7d7691013401e171014e89/filesaver.min.js"></script>

<script src="script.js"></script>

var color_map = {
      "O": "rgb(255, 165, 0)",
      "P": "rgb(255, 192, 203)",
      "B": "rgb(0, 0, 255)",
      "W": "rgb(255, 255, 255)",
      "G": "rgb(0, 128, 0)",
      "R": "rgb(255, 0, 0)",
      "M": "rgb(255,0,255)",
      "C": "rgb(0,255,255)"
    }

var canvas_width = d3.select("#canvas").node().getBoundingClientRect().width,
      canvas_height = 500,
      svg_rule_width = 1.00 * canvas_width,
      svg_rule_height = canvas_height - 30.23;

jQuery(function($) {
      $(document).ready(function() {
        draw_rule_graph();

$("#btn_validate_questionnaire").on("click", function() {
          // $("#modal_graph_rule").modal();

$('html, body').animate({
              scrollTop: $("#graph_rule_container").offset().top
          }, 1000);

var records = get_questionaire_records(),
            idx = 0;
          process_record_wrapper(records, idx,
            variable_candidate_callback = function(variable) {
            // $('#modal_graph_rule').modal('hide');

$('html, body').animate({
                scrollTop: $("#questionnaire").offset().top
            }, 1000, function() {
              alert("Fix value in variable " + variable);

$($("#questionnaire input[name=" + variable + "]")[idx])
                .css("border-color", "red")
                .focus();
            });
          });
        });

// $('#modal_graph_rule').on('show.bs.modal', function(event) {
        //   var modal = $(this);
        //   // Move rule graph to modal
        //   $("#canvas svg").appendTo(modal.find('#graph_rule_container'));
        // });
        //
        // $('#modal_graph_rule').on('hide.bs.modal', function(event) {
        //   var modal = $(this);
        //   // Move back rule back to it's container
        //   modal.find('#graph_rule_container').find("svg").appendTo($("#canvas"));
        // });

// WARNING : TESTING ONLY
        d3.csv("data_error.csv", function(error, data_error) {
          data_error.forEach(function(record, idx) {
            var record = data_error[idx];
            for (v in record) {
              var val = record[v];
              $($("input[name=" + v + "]")[idx]).val(val);
            }
          });
        });
      });
    });

function get_questionaire_records() {
      var $inputs = $("#questionnaire input");
      var $inputs = $.makeArray($inputs);

var var_vals_pair = $inputs.reduce(function(map, inp) {
        var $inp = $(inp);
        var name = $inp.attr("name");
        var value = $inp.val();

if (!(name in map)) map[name] = [];
        map[name].push(value);

return map;
      }, {});

// console.log(var_vals_pair)
      // // Output: {"R402":["","","","",""],"R403":["","","","",""],"R404":["","","","",""],...}

// console.log(records)
      // // Output : [{"R402":"1","R403":"",...},{"R402":"","R403":"",...},{"R402":"","R403":"",...},...]

return records;
    }

function draw_rule_graph() {
      d3.select("div#canvas")
        .style("height", canvas_height + 'px')
        .classed("svg-container", true)
        .select("svg.rule")
        .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("viewBox", "0 0 " + svg_rule_width + " " + svg_rule_height + "")
        .classed("svg-content-responsive", true);

d3.json(rule_graph_file, function(error, graph) {
        if (error) throw error;

graph.nodes.forEach(function(n) {
          r = encode_rule(n.id);
          n.rule = r.rule;
          n.variable = r.variable;
          n.operator = r.operator;
          n.value = r.value;
        });

var nodeHash = graph.nodes.reduce(function(map, n) {
          map[n.id] = n;
          return map;
        }, {});

graph.links.forEach(function(e, i) {
          e.id = i;
          e.source = nodeHash[e.source];
          e.target = nodeHash[e.target];
          e.weight = 5;
        });

create_rule_network(graph.nodes, graph.links);
      });
    }

function create_rule_network(nodes, edges) {
      var rule_force = d3.layout.force()
        .nodes(nodes)
        .links(edges)
        .size([svg_rule_width, svg_rule_height])
        .charge(-300)
        .chargeDistance(100)
        .gravity(0.05)
        .on("tick", update_rule_network)
        .on('end', function() {
          console.log('Layout finished.');
          // process_data_error(data_error_file, nodes, edges);
        });

var rule_drag = rule_force.drag(),
        svg = d3.select("svg.rule"),
        g = svg.append("g");

svg.append("svg:defs").selectAll("marker")
        .data(["end"])
        .enter().append("svg:marker")
        .attr("id", String)
        .attr("viewBox", "0 -5 10 10")
        .attr("refX", 15)
        .attr("refY", -1.5)
        .attr("markerWidth", 6)
        .attr("markerHeight", 6)
        .attr("orient", "auto")
        .append("svg:path")
        .attr("d", "M0,-5L10,0L0,5")
        .attr("class", "arrow");

g.append("g").attr("class", "edges")
        .selectAll("g.edge")
        .data(edges, function(d) {
          return d.id
        })
        .enter()
        .append("g")
        .attr("class", "edge")
        .append("line")
        .attr("marker-end", "url(#end)");

var g_nodes = g.append("g").attr("class", "nodes")
        .selectAll("g.node")
        .data(nodes)
        .enter()
        .append("g")
        .attr("class", function(d) {
          return "node " + d.rule
        })
        .attr("variable", function(d) {
          return d.variable
        })
        .attr("operator", function(d) {
          return d.operator
        })
        .attr("value", function(d) {
          return d.value
        })
        .call(rule_drag);

g_nodes.append("circle")
        .attr("r", 6);

g_nodes.append("text")
        .style("text-anchor", "middle")
        .attr("y", 3)
        .style("stroke-width", "1px")
        .style("stroke-opacity", 0.75)
        .style("stroke", "white")
        .style("font-size", "8px")
        .text(function(d) {
          return d.id
        })
        .style("pointer-events", "none");

g_nodes.append("text")
        .style("text-anchor", "middle")
        .attr("y", 3)
        .style("font-size", "8px")
        .text(function(d) {
          return d.id
        })
        .style("pointer-events", "none");

rule_force.start();
    }

function update_rule_network(e) {
      d3.select("svg.rule").selectAll("line")
        .attr("x1", function(d) {
          return d.source.x
        })
        .attr("y1", function(d) {
          return d.source.y
        })
        .attr("x2", function(d) {
          return d.target.x
        })
        .attr("y2", function(d) {
          return d.target.y
        });

d3.select("svg.rule").selectAll("g.node")
        .attr("transform", function(d) {
          return "translate(" + d.x + "," + d.y + ")";
        });
    }

function process_record_wrapper(records, idx, vc_callback) {
      if (idx >= records.length) return;

// if (!$('#modal_graph_rule').hasClass('in')) {
      //   $('#modal_graph_rule').modal('show');
      // }

$("#questionnaire input").css("border-color", "initial");

process_record(records[idx], vc_callback,
        clean_callback = function() {
          // $('#modal_graph_rule').modal('hide');

idx += 1;
          process_record_wrapper(records, idx);
        });
    }

function process_record(data, var_callback, clean_callback) {
      var nodes_el = d3.selectAll(".node")
        .each(function(d) {
          d.input = data[d.variable];
          if (d.input == null || d.input == "") d.input = "NULL";
        });

init_color(
        init_color_finished_cb = function() {
          console.log("=> Color initialized");

validate_input(
            validate_input_cb = function() {
              console.log("=> Set valid rule(s) to " + color_map["G"]);

calculate_max_centrality_err_rules(
                error_rules_cb = function(error_rules) {
                  console.log("=> Set error rule(s): " + error_rules.join(", ") + " to " + color_map["M"]);
                  if (error_rules.length == 0) clean_callback();
                },

max_centrality_nodes_cb = function(max_centrality_nodes) {
                  console.log("=> Max centrality rule(s): " + max_centrality_nodes.join(", "));
                },

selected_variable_cb = function(variable) {
                  console.log("=> Variable to be fixed: " + variable);
                  // $("input[name=" + variable + "]").css("border-color", "red").focus();
                  var_callback(variable);
                });
            });
        });
    }

function init_color(finish_callback) {
      var init_color_it = 0;

d3.selectAll(".node")
        .selectAll("circle")
        .each(function(d) {
          if (d.id.startsWith("G") && d.id.endsWith("-in")) {
            d.color = "P";
          } else if (d.id.startsWith("G") && d.id.endsWith("-out")) {
            d.color = "B";
          } else if (d.id.startsWith("C")) {
            d.color = "W";
          } else {
            d.color = "O";
          }
          init_color_it += 1;
        })
        .transition()
        .duration(200)
        .style("fill", function(d) {
          return color_map[d.color]
        })
        .delay(100)
        .each("end", function(d) {
          init_color_it -= 1;
          if (init_color_it == 0) {
            finish_callback();
          }
        });
    }

function calculate_max_centrality_err_rules(err_callback, cent_callback, cdt_callback) {
      var hyper_edges = {},
        error_rules = [],
        rule_error_iter = 0;

var err_nodes = d3.selectAll(".node")
        .selectAll("circle")
        .filter(function(d) {
          if (d.id.startsWith("C")) return true;
          else return false;
        }).each(function(d) {
          var source_variables = [],
            target_variables = [],
            is_target_error = false;

in_edges = d3.selectAll(".edge")
            .filter(function(e) {
              if (e.target.id == d.id) return true;
              else return false;
            }).each(function(f) {
              // console.log(d.variable, f.source.id, f.source.color)
              if (f.source.color == "G") {
                if (f.source.rule.startsWith("G")) {
                  d3.selectAll(".edge")
                    .filter(function(e) {
                      if (e.target.id == f.source.id) return true;
                      return false;
                    })
                    .each(function(g) {
                      source_variables.push(g.source.variable);
                    });
                } else {
                  source_variables.push(f.source.variable);
                }
              }
            });

out_edges = d3.selectAll(".edge")
            .filter(function(e) {
              if (e.source.id == d.id) return true;
              else return false;
            }).each(function(d) {
              if (d.target.rule.startsWith("G")) {
                d3.selectAll(".edge")
                  .filter(function(e) {
                    if (e.source.id == d.target.id) return true;
                    return false;
                  })
                  .each(function(d) {
                    target_variables.push(d.target.variable);
                  });
              } else {
                target_variables.push(d.target.variable);
              }

if (d.target.color == "G") is_target_error = true;
            });

// console.log(d.rule, source_variables, target_variables)

d.source_variables = source_variables;
          d.target_variables = target_variables;

if (source_variables.length != 0 && !is_target_error) {
            d.error = true;
            d.color = "M";
          } else {
            d.error = false;
          }
        })
        .each(function(d) {
          var hyper_edge = [];

if (d.error) {
            d.source_variables.forEach(function(sv) {
              d.target_variables.forEach(function(tv) {
                if (!hyper_edge.includes(sv)) {
                  hyper_edge.push(sv);
                }
                if (!hyper_edge.includes(tv)) {
                  hyper_edge.push(tv);
                }
              });
            });
            // console.log("Hyperedges : ", d.rule, hyper_edge);
            d.hyper_edge = hyper_edge;
            hyper_edges[d.rule] = hyper_edge;
            error_rules.push(d.id);;
          }
        })
        .filter(function(d) {
          return d.error;
        })
        .each(function(d) {
          rule_error_iter += 1;
        })
        .transition()
        .duration(1000)
        .attr("r", 12)
        .style("fill", function(d) {
          return color_map[d.color];
        })
        .delay(200)
        .each("end", function(d) {
          d3.select(this)
            .transition()
            .duration(1000)
            .attr("r", 6);

rule_error_iter -= 1;
          if (rule_error_iter == 0) {
            err_callback(error_rules);

var max_centrality_nodes = [],
              c_hyper_edges = JSON.parse(JSON.stringify(hyper_edges));

while (Object.keys(hyper_edges).length > 0) {
              var key = Object.keys(hyper_edges)[0],
                hyper_edge = hyper_edges[key],
                keys_to_remove = [];

hyper_edge.forEach(function(n) {
                if (!(max_centrality_nodes.includes(n))) {
                  max_centrality_nodes.push(n);
                }

Object.keys(hyper_edges).forEach(function(k) {
                  var he = hyper_edges[k];
                  if (he.includes(n)) {
                    if (!(keys_to_remove.includes(k))) {
                      keys_to_remove.push(k);
                    }
                  }
                });
              });

keys_to_remove.forEach(function(k) {
                delete hyper_edges[k]
              });
            }

var max = -1,
              selected_nodes = [];

max_centrality_nodes.forEach(function(n) {
              var count = 0;
              Object.keys(c_hyper_edges).forEach(function(k) {
                var he = c_hyper_edges[k];
                if (he.includes(n)) {
                  count += 1;
                }
              });

// console.log(n, count)

if (count > max) {
                selected_nodes = [];
                selected_nodes.push(n);
                max = count;
              } else if (count == max) {
                selected_nodes.push(n);
              }
            });

max_centrality_nodes = selected_nodes;
            cent_callback(max_centrality_nodes)

var revision_iter = 0,
              candidate = 0;

// var sel_cdt_idx = random_int(0, candidate - 1);
            var sel_cdt_idx = 1;

candidate_nodes.filter(function(d) {
                if (d.candidate == sel_cdt_idx) {
                  d.color = "R";
                  return true;
                }
                return false;
              })
              .each(function() {
                revision_iter += 1;
              })
              .transition()
              .duration(1000)
              .attr("r", 12)
              .style("fill", function(d) {
                return color_map[d.color];
              })
              .delay(200)
              .each("end", function(d) {
                d3.select(this)
                  .transition()
                  .duration(1000)
                  .attr("r", 6)
                  .delay(200)
                  .each("end", function(e) {
                    cdt_callback(e.variable)
                  });
              });
          }
        });
    }

function encode_rule(rule) {
      rule = rule.replace("==", "_eq_");
      rule = rule.replace("!=", "_neq_");
      rule = rule.replace(">", "_g_");
      rule = rule.replace(">=", "_ge_");
      rule = rule.replace("<", "_l_");
      rule = rule.replace("<=", "_le_");
      vov = rule.split("_");
      return {
        'rule': rule,
        'variable': vov[0],
        'operator': vov[1],
        'value': vov[2]
      };
    }

function random_int(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
  </script>

</body>

</html>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js to https://cdnjs.cloudflare.com/ajax/libs/owlcarousel2/2.2.1/owl.carousel.min.js

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.0/Sortable.min.js to https://cdnjs.cloudflare.com/ajax/libs/sortable/1.4.0/sortable.min.js

Updated missing url https://bl.ocks.org/emeeks/raw/9915de8989e2a5c34652/7d22d8e4f05e944ced10408ae64579beff3c0858/jsnetworkx.js to /emeeks/9915de8989e2a5c34652/7d22d8e4f05e944ced10408ae64579beff3c0858/jsnetworkx.js

Updated missing url https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js to https://cdn.jsdelivr.net/gh/eligrey/canvas-toblob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toblob.js

Updated missing url https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js to https://cdn.jsdelivr.net/gh/eligrey/filesaver.js/e9d941381475b5df8b7d7691013401e171014e89/filesaver.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js

https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js

https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.0/Sortable.min.js

https://d3js.org/d3.v3.min.js

https://bl.ocks.org/emeeks/raw/9915de8989e2a5c34652/7d22d8e4f05e944ced10408ae64579beff3c0858/jsnetworkx.js

https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js

https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js