cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <header class="white-banner" role="banner">
  <div class="container">
    <a href="/"><img class="logo" src=""></a>
  </div>
</header>
<section class="row title">
  <div class="twothirds aligncenter textcenter white-text">
    <h1>How Do You Measure Up?</h1>
    <h2>Cybersecurity Frameworks and Foundational Security Controls</h2>
  </div>
</section>
<section>
  <div class="carousel--wrapper carousel--wrapper--sec">
    <div class="carousel">
      <div class="progress-bar">
        <div class="progress-bar-insider" data-progress=""></div>
      </div>
      <div class="carousel__content" style="width: 1800%; transform: translate(0%, 0px);">
        <div class="carousel--item" style="width: 5.55556%;">
          <p class="carousel--title carousel--title--sub">Take a few minutes to compare your adoption of CIS Critical Security Controls 1 – 5 with similar sized organizations surveyed by Dimensional Research.</p>
          <span class="carousel--radios"><button class="btn btn-primary nav--buttons--right mt">Start</button>
            </span>
        </div>
        <div class="carousel--item" style="width: 5.55556%;">
          <p class="carousel--title">Company Size?</p>
          <p class="carousel--title carousel--title--sub">How many employees in your organization?</p>
          <span class="carousel--radios">
              <div class="radio-item">
                <input id="c100" data-text="100 - 1,000" data-value="100-1,000" name="size" type="radio" value="0">
                <label for="c100">100 - 1,000</label>
              </div>
              <div class="radio-item">
                <input id="c1000" data-text="1,001 - 5,000" data-value="1,001-5000" name="size" type="radio" value="1">
                <label for="c1000">1,001-5000</label>
              </div>
              <div class="radio-item">
                <input id="c5000" data-text=">5,000" data-value="5,000+" name="size" type="radio" value="2">
                <label for="c5000">&gt;5,000</label>
              </div>
            </span>
        </div>
        <div class="carousel--item violet" style="width: 5.55556%;">
          <p class="carousel--title">Question 1</p>
          <p class="carousel--title carousel--title--sub">Does your organization have automated controls to inventory systems and devices connected to the network?
          </p>
          <span class="carousel--radios">
              <div class="radio-item">
                <input id="q1yes" class="questions" data-text="Yes" name="q1" type="radio">
                <label for="q1yes">Yes</label>
              </div>
              <div class="radio-item">
                <input id="q1no" data-text="No" name="q1" type="radio">
                <label for="q1no">No</label>
              </div>
            </span>
        </div>
        <div class="carousel--item violet" style="width: 5.55556%;">
          <p class="carousel--title">Question 2</p>
          <p class="carousel--title carousel--title--sub">Does your organization have automated controls to differentiate between authorized and unauthorized systems and devices?</p>
          <span class="carousel--radios">
              <div class="radio-item">
                <input id="q2yes" class="questions" data-text="Yes" name="q2" type="radio">
                <label for="q2yes">Yes</label>
              </div>
              <div class="radio-item">
                <input id="q2no" data-text="No" name="q2" type="radio">
                <label for="q2no">No</label>
              </div>
            </span>
        </div>
        <div class="carousel--item violet" style="width: 5.55556%;">
          <p class="carousel--title">Question 3</p>
          <p class="carousel--title carousel--title--sub">Does your organization have automated controls to allow only authorized systems and devices to connect to the network?</p>
          <span class="carousel--radios">
              <div class="radio-item">
                <input id="q3yes" class="questions" data-text="Yes" name="q3" type="radio">
                <label for="q3yes">Yes</label>
              </div>
              <div class="radio-item">
                <input id="q3no" data-text="No" name="q3" type="radio">
                <label for="q3no">No</label>
              </div>
            </span>
        </div>
        <div class="carousel--item accent-blue" style="width: 5.55556%;">
          <p class="carousel--title">Question 4</p>
          <p class="carousel--title carousel--title--sub">Does your organization have automated controls to inventory applications and software connected to the network?</p>
          <span class="carousel--radios">
              <div class="radio-item">
                <input id="q4yes" class="questions" data-text="Yes" name="q4" type="radio">
                <label for="q4yes">Yes</label>
              </div>
              <div class="radio-item">
                <input id="q4no" data-text="No" name="q4" type="radio">
                <label for="q4no">No</label>
              </div>
            </span>
        </div>
        <div class="carousel--item accent-blue" style="width: 5.55556%;">
          <p class="carousel--title">Question 5</p>
          <p class="carousel--title carousel--title--sub">Does your organization have automated controls to differentiate between authorized and unauthorized applications and software?</p>
          <span class="carousel--radios">
              <div class="radio-item">
                <input id="q5yes" class="questions" data-text="Yes" name="q5" type="radio">
                <label for="q5yes">Yes</label>
              </div>
              <div class="radio-item">
                <input id="q5no" data-text="No" name="q5" type="radio">
                <label for="q5no">No</label>
              </div>
            </span>
        </div>
        <div class="carousel--item accent-blue" style="width: 5.55556%;">
          <p class="carousel--title">Question 6</p>
          <p class="carousel--title carousel--title--sub">Does your organization have automated controls to allow only authorized applications and software to install or execute?</p>
          <span class="carousel--radios">
              <div class="radio-item">
                <input id="q6yes" class="questions" data-text="Yes" name="q6" type="radio">
                <label for="q6yes">Yes</label>
              </div>
              <div class="radio-item">
                <input id="q6no" data-text="No" name="q6" type="radio">
                <label for="q6no">No</label>
              </div>
            </span>
        </div>
        <div class="carousel--item blue" style="width: 5.55556%;">
          <p class="carousel--title">Question 7</p>
          <p class="carousel--title carousel--title--sub">Does your organization have automated controls to enforce security configuration standards for laptops, workstations, and servers?</p>
          <span class="carousel--radios">
              <div class="radio-item">
                <input id="q7yes" class="questions" data-text="Yes" name="q7" type="radio">
                <label for="q7yes">Yes</label>
              </div>
              <div class="radio-item">
                <input id="q7no" data-text="No" name="q7" type="radio">
                <label for="q7no">No</label>
              </div>
            </span>
        </div>
        <div class="carousel--item blue" style="width: 5.55556%;">
          <p class="carousel--title">Question 8</p>
          <p class="carousel--title carousel--title--sub">Does your organization have automated controls to perform vulnerability scanning?
          </p>
          <span class="carousel--radios">
              <div class="radio-item">
                <input id="q8yes" class="questions" data-text="Yes" name="q8" type="radio">
                <label for="q8yes">Yes</label>
              </div>
              <div class="radio-item">
                <input id="q8no" data-text="No" name="q8" type="radio">
                <label for="q8no">No</label>
              </div>
            </span>
        </div>
        <div class="carousel--item blue" style="width: 5.55556%;">
          <p class="carousel--title">Question 9</p>
          <p class="carousel--title carousel--title--sub">Are your tools able to do vulnerability scanning in authenticated mode?</p>
          <span class="carousel--radios">
              <div class="radio-item">
                <input id="q9yes" class="questions" data-text="Yes" name="q9" type="radio">
                <label for="q9yes">Yes</label>
              </div>
              <div class="radio-item">
                <input id="q9no" data-text="No" name="q9" type="radio">
                <label for="q9no">No</label>
              </div>
            </span>
        </div>
        <div class="carousel--item accent-blue" style="width: 5.55556%;">
          <p class="carousel--title">Question 10</p>
          <p class="carousel--title carousel--title--sub">Do your organization’s vulnerability scanning tools use agents?</p>
          <span class="carousel--radios">
              <div class="radio-item">
                <input id="q10yes" class="questions" data-text="Yes" name="q10" type="radio">
                <label for="q10yes">Yes</label>
              </div>
              <div class="radio-item">
                <input id="q10no" data-text="No" name="q10" type="radio">
                <label for="q10no">No</label>
              </div>
            </span>
        </div>
        <div class="carousel--item accent-blue" style="width: 5.55556%;">
          <p class="carousel--title">Question 11</p>
          <p class="carousel--title carousel--title--sub">Does your organization have automated controls to scan systems on the network for vulnerabilities on at least a weekly basis?</p>
          <span class="carousel--radios">
              <div class="radio-item">
                <input id="q11yes" class="questions" data-text="Yes" name="q11" type="radio">
                <label for="q11yes">Yes</label>
              </div>
              <div class="radio-item">
                <input id="q11no" data-text="No" name="q11" type="radio">
                <label for="q11no">No</label>
              </div>
            </span>
        </div>
        <div class="carousel--item accent-blue" style="width: 5.55556%;">
          <p class="carousel--title">Question 12</p>
          <p class="carousel--title carousel--title--sub">Does your organization have automated controls to verify that important vulnerabilities with patches available are addressed within two weeks?</p>
          <span class="carousel--radios">
              <div class="radio-item">
                <input id="q12yes" class="questions" data-text="Yes" name="q12" type="radio">
                <label for="q12yes">Yes</label>
              </div>
              <div class="radio-item">
                <input id="q12no" data-text="No" name="q12" type="radio">
                <label for="q12no">No</label>
              </div>
            </span>
        </div>
        <div class="carousel--item violet" style="width: 5.55556%;">
          <p class="carousel--title">Question 13</p>
          <p class="carousel--title carousel--title--sub">Does your organization have automated controls to minimize use of accounts having administrative privileges?
          </p>
          <span class="carousel--radios">
              <div class="radio-item">
                <input id="q13yes" class="questions" data-text="Yes" name="q13" type="radio">
                <label for="q13yes">Yes</label>
              </div>
              <div class="radio-item">
                <input id="q13no" data-text="No" name="q13" type="radio">
                <label for="q13no">No</label>
              </div>
            </span>
        </div>
        <div class="carousel--item violet" style="width: 5.55556%;">
          <p class="carousel--title">Question 14</p>
          <p class="carousel--title carousel--title--sub">Does your organization have automated controls to change default passwords for applications, operating systems, routers, firewalls, wireless access points, and other systems?
          </p>
          <span class="carousel--radios">
              <div class="radio-item">
                <input id="q14yes" class="questions" data-text="Yes" name="q14" type="radio">
                <label for="q14yes">Yes</label>
              </div>
              <div class="radio-item">
                <input id="q14no" data-text="No" name="q14" type="radio">
                <label for="q14no">No</label>
              </div>
            </span>
        </div>
        <div class="carousel--item violet" style="width: 5.55556%;">
          <p class="carousel--title">Question 15</p>
          <p class="carousel--title carousel--title--sub">Does your organization have automated controls for multi-factor authentication for administrative access?</p>
          <span class="carousel--radios">
              <div class="radio-item">
                <input id="q15yes" class="questions" data-text="Yes" name="q15" type="radio">
                <label for="q15yes">Yes</label>
              </div>
              <div class="radio-item">
                <input id="q15no" data-text="No" name="q15" type="radio">
                <label for="q15no">No</label>
              </div>
            </span>
        </div>
        <div class="carousel--item" style="width: 5.55556%;">
          <p class="carousel--title">Automated Controls Comparison</p>
          <div class="btn btn-primary carousel--btn" onclick="calc_results(this);">
            Calculate Results
          </div>
        </div>
      </div>
      <div class="carousel__nav">
        <a class="nav--buttons nav--buttons--left" href="#" style="display: none;">←</a> <a class="nav--buttons nav--buttons--right" href="#" style="display: none;">→</a>
      </div>
    </div>
  </div>
</section>
<section class="row gray pad textcenter" id="auto-con-calc" style="display: none;"></section>
<section class="row gray">
  <div class="container">
    <div class="onehalf aligncenter textcenter lightgray">
      <h3>Check out the entire Dimensional Research Survey Report</h3><a class="btn btn-primary" href="http://lookbook.tenable.com/foundational-controls-adoption/survey-report" target="_blank">Read the Report Now</a>
    </div>
  </div>
</section>
            
          
!
            
              footer {
  color: #555559;
}

strong {
  font-size: 1.5em;
}

.title {
  background: url(/sites/all/themes/tenablefourteen/img/16/bg-generic.png), linear-gradient(180deg, #430098, #0071CE), #00A5B5;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
}

.title h1 {

  padding: .5em 0;
  font-size: 4em;
  font-weight: 400;
}

title p {
  font-size: 1.125em;
}

.flex-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
}

.flex-one,
.flex-two {
  width: 100%;
  background-color: #fff;
  color: #fff;
  margin-bottom: 2em;
  padding: 1em;
}
.flex-one p,
.flex-two p {
  font-size: 1.125em;
  text-shadow: 2px 2px 5px #263746;
}
.flex-one.flex-fewer,
.flex-two.flex-fewer {
  background: url("/sites/all/themes/tenablefourteen/img/backgrounds/bg-dots.png") center center no-repeat, linear-gradient(0deg, #00236d, #003bba);
  background-color: #0033a0;
}
.flex-one.flex-same,
.flex-two.flex-same {
  background: url("/sites/all/themes/tenablefourteen/img/backgrounds/bg-dots.png") center center no-repeat, linear-gradient(0deg, #00559b, #028dff);
  background-color: #0071ce;
  margin-top: -1em;
  margin-bottom: 1em;
}
.flex-one.flex-more,
.flex-two.flex-more {
  background: url("/sites/all/themes/tenablefourteen/img/backgrounds/bg-dots.png") center center no-repeat, linear-gradient(0deg, #21004c, #4e00b2);
  background-color: #430098;
}

@media (min-width: 38em) {
  .flex-one,
  .flex-two {
    width: 47%;
  }
}
@media (min-width: 64em) {
  .flex-one {
    width: 23%;
  }

  .flex-two {
    width: 32%;
  }
}

.gray {
  background: #f5f5f5;
}

.lightgray {
  background: #fff;
}

/* Bobby's CSS */
body,
html {
  overflow-x: hidden;
}

.carousel--wrapper {
  /* max-width: 940px; */
  width: 100%;
  position: relative;
  /* margin: 0 auto; */
}

.carousel--wrapper--sec {
  overflow: visible;
}

/*
.carousel--wrapper--sec:after, .carousel--wrapper--sec:before {
  content: "";
  position: absolute;
  width: 800px;
  height: 100%;
  top: 0;
  left: 100%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 2;
}

.carousel--wrapper--sec:before {
  left: -800px;
}
*/

.carousel {
  width: 100%;
  position: relative;
}
.carousel .progress-bar {
  position: relative;
  background-color: #fff;
  height: 2em;
}
.carousel .progress-bar .progress-bar-insider {
  position: relative;
  background-color: #00a5b5;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  width: 4%;
  height: 2em;
  transition: 0.2s width;
}
.carousel .progress-bar .progress-bar-insider:after {
  content: attr(data-progress);
  color: white;
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
}
.carousel .carousel__content {
  width: auto;
  position: relative;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transition: translate3d(0, 0, 0);
}
.carousel .carousel__content .carousel--item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  float: left;
  height: 25rem;
  background-color: #425363;
}
.carousel .carousel__content .carousel--item.teal {
  background-color: #00A5B5;
}
.carousel .carousel__content .carousel--item.accent-teal {
  background-color: #00839B;
}
.carousel .carousel__content .carousel--item.violet {
  background-color: #33006F;
}
.carousel .carousel__content .carousel--item.accent-violet {
  background-color: #33006F;
}
.carousel .carousel__content .carousel--item.blue {
  background-color: #002F87;
}
.carousel .carousel__content .carousel--item.accent-blue {
  background-color: #0071CE;
}
.carousel .carousel__content .carousel--item .carousel--title {
  transform: translateY(-50px);
  padding: 0;
  margin-bottom: 0;
  font-size: 3rem;
  width: 100%;
  text-align: center;
  color: #fff;
  opacity: 0.6;
}
.carousel .carousel__content .carousel--item .carousel--title--sub {
  font-size: 1.2em;
  /*padding: 0 16%;*/
  max-width: 40em;
  opacity: 1;
}
.carousel .carousel__content .carousel--item .carousel--radios {
  font-size: 2em;
  color: #fff;
  opacity: 1;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.radio-item {
  display: flex;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  margin: 0 2em;
}

.carousel .carousel__content .carousel--item .carousel--btn {

  font-size: 2em;
}
.carousel .carousel__nav {
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -17px;
  left: 0;
  z-index: 1;
}
.carousel .carousel__nav .nav--buttons {
  position: absolute;
  top: 0;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.5);
  padding: 12px 12px;
  font-weight: bold;
  text-decoration: none;
  font-size: 1.5rem;
  transition: padding .25s ease;
}
.carousel .carousel__nav .nav--buttons:hover {
  padding: 15px 15px;
}
.carousel .carousel__nav .nav--buttons--left {
  border-radius: 0px 3px 3px 0px;
}
.carousel .carousel__nav .nav--buttons--right {
  right: 0;
  border-radius: 3px 0px 0px 3px;
}

label {
  padding: .25em 0 0;
  cursor: pointer;
}

input[type="radio"] {
  appearance: none;
  -moz-appearance: none;
  margin: 0 1em;
  width: 0.6em;
  height: 0.6em;
  background: #eeeeee;
  box-shadow: inset 0 0 0 .4em #fff, 0 0 0 .2em;
  border-radius: 50%;
  transition: .2s;
  cursor: pointer;
  color: #ddd;
  text-align: center;
  -ms-flex-item-align: center;
  align-self: center;
}
input[type="radio"]:hover, input[type="radio"]:checked {
  background: #000;
  box-shadow: inset 0 0 0 .5em #fff, 0 0 0 .25em #00A5B5;
}
input[type="radio"]:checked {
  background: #000;
  box-shadow: inset 0 0 0 .4em #fff, 0 0 0 .2em #00A5B5;
}
input[type="radio"]:focus {
  outline: 0;
}

.middle-flex {
  margin-top: -1em;
  margin-bottom: 1em;
}

@media (max-width: 40em) {
  .carousel--title {
    top: 20% !important;
    font-size: 2em !important;
  }

  .carousel--title--sub {
    margin-top: 0.5em !important;
    font-size: 1em !important;
  }

  .carousel--radios {
    top: 45% !important;
  }

  .carousel--btn {
    font-size: 1.25em !important;
  }

  .carousel--title {
    font-size: 1.5em !important;
  }

  .carousel--title--sub {
    font-size: 0.9em !important;
  }

  .carousel--radios {
    top: 40% !important;
    font-size: 1.5em !important;
  }

  .full-when-mobile {
    width: 100%;
  }
}

@media (min-width: 30em) and (max-width: 60em) {
  .carousel--radios {
    width: 80% !important;
  }
  .progress-bar-insider {
    font-size: 0.8em;
    padding: 1.25em !important;
  }
}

@media (max-width: 30em) {
  .carousel--radios {
    margin-top: 2em;
    width: 85% !important;
    font-size: 1.2em !important;
  }
  .progress-bar-insider {
    font-size: 0.5em;
    padding: 2em !important;
  }
}

.score-slider-track {
  margin-bottom: 4em;
  position: relative;
  border-radius: 0.125em;
  background: linear-gradient(90deg, #ccc, #888);
  box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.375);
  height: 3em;
  width: 100%;
}
.score-slider-track .score-slider {
  position: relative;
  height: 5em;
  width: 10%;
  background-color: #0071CE;
  color: #fff;
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.25);
  transform: translateX(-5%);
  top: -1em;
  left: 0%;
  transition: 0.8s;
  border-radius: 0.125em;
  line-height: 5em;
  font-weight: bold;
  z-index: 3;
}
.score-slider-track .score-slider-less {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-top-left-radius: 0.25em;
  border-bottom-left-radius: 0.25em;
  background-color: #0033A0;
  color: #fff;
  line-height: 3em;
  height: 3em;
  width: 0%;
  transition: 0.8s;
}
.score-slider-track .score-slider-more {
  position: absolute;
  color: white;
  line-height: 3em;
  top: 0;
  right: 0;
  z-index: 0;
  border-top-right-radius: 0.25em;
  border-bottom-right-radius: 0.25em;
  background-color: #430098;
  color: #fff;
  height: 3em;
  width: 98%;
  transition: 0.8s;
}


            
          
!
            
              (function () {
    var carouselTransition, carouselContent, carouselIndex, carouselLength, firstClone, firstItem, isAnimating, itemWidth, lastClone, lastItem;
    carouselTransition = 250;
    carouselContent = $('.carousel__content');
    carouselIndex = 0;
    carouselMax = 0;
    carouselLength = carouselContent.children().length;
    isAnimating = false;
    itemWidth = 100 / carouselLength;
    firstItem = $(carouselContent.children()[0]);
    lastItem = $(carouselContent.children()[carouselLength - 1]);
    firstClone = null;
    lastClone = null;
    carouselContent.css('width', carouselLength * 100 + '%');
    carouselContent.transition({ x: carouselIndex * -itemWidth + '%' }, 0);
    $.each(carouselContent.children(), function () {
        return $(this).css('width', itemWidth + '%');
    });
    $('.nav--buttons--left').on('click', function (event) {
        event.preventDefault();
        if (isAnimating || carouselIndex === 0) {
            return;
        }
        isAnimating = true;
        carouselIndex--;
        update_progress_bar(carouselIndex);
        $(".nav--buttons--right").css("display", "block");
        if (carouselIndex === 0 || carouselIndex === 1) {
          $(".nav--buttons--left").css("display", "none");
        }
        return carouselContent.transition({ x: carouselIndex * -itemWidth + '%' }, carouselTransition, 'ease', function () {
            return isAnimating = false;
        });
    });
    $('.nav--buttons--right').on('click', function (event) {
        event.preventDefault();
        if (isAnimating || carouselIndex === carouselLength - 1) {
            return;
        }
        isAnimating = true;
        carouselIndex++;
        update_progress_bar(carouselIndex);
        if ( carouselIndex > carouselMax ) {
          carouselMax = carouselIndex;
        }
        $(".nav--buttons--left").css("display", "block");
        if (carouselIndex === carouselLength - 1 || carouselIndex === carouselMax) {
          $(".nav--buttons--right").css("display", "none");
        }
        if (carouselIndex === 1) {
          $(".nav--buttons--left").css("display", "none");
        }
        return carouselContent.transition({ x: carouselIndex * -itemWidth + '%' }, carouselTransition, 'ease', function () {
            return isAnimating = false;
        });
    });
}.call(this));

function calc_results() {
  var count;
  $(".questions").each(function(){
    if(this.is(":checked")) {
      count++;
    }
  });
}

var results = [
  ["13.33", "5.45", "2.68"],    // 0
  ["8.89", "4.55", "9.82"],     // 1
  ["5.56", "4.55", "14.29"],    // 2
  ["8.89", "4.55", "0.00"],     // 3
  ["1.11", "6.36", "6.25"],     // 4
  ["11.11", "3.64", "4.46"],    // 5
  ["8.89", "4.55", "4.46"],     // 6
  ["5.56", "4.55", "6.25"],     // 7
  ["5.56", "4.55", "2.68"],     // 8
  ["6.67", "8.18", "8.93"],     // 9
  ["10.00", "10.00", "6.25"],   // 10
  ["3.33", "5.45", "4.46"],     // 11
  ["3.33", "5.45", "8.04"],     // 12
  ["4.44", "11.82", "4.46"],    // 13
  ["2.22", "10.00", "2.68"],    // 14
  ["1.11", "6.36", "14.29"]     // 15
]

function sumArray(from, to, size) {
  var sum = parseFloat("0.00");
  for ( var i = from; i <= to; i++ ) {
    sum += parseFloat(results[i][size]);
  }
  return sum.toFixed(1).toString();
}

function calc_results(button_elem) {
  var count = 0;
  var checked = 0;
  var size = $("input[name=size]:checked").val();
  $(":checked").each(function() {
    checked++;
  });
  if ( checked != 16 ) {
    alert("Please check all of the questions.");
    return;
  }
  $(".questions").each(function() {
    if ( $(this).is(":checked") ) {
        count++;
    }
  });
  var less = sumArray(0, count-1, size) ;
  var same = sumArray(count, count, size);
  var more = sumArray(count+1, 15, size);

  var resultsText = "";
  resultsText += '<div class="container">';
  resultsText += '<h2 style="margin-top: 0.5em; color: #00a5b5;">So, Where Do You Stand Today?</h2>';
  resultsText = resultsText + '<h3>You are currently automating <strong>' + (count) + '</strong> controls of the 15 sub-controls used to assess Critical Security Controls 1 - 5 in your organization of <strong>' + $("input[name=size]:checked").attr('data-value') + '</strong> people.</h3>';
  resultsText += '<div style="margin-top: 2.5em;" class="score-slider-track">';
  resultsText += '<div class="score-slider">0%</div>';
  resultsText += '<div class="score-slider-less">0%</div>';
  resultsText += '<div class="score-slider-more">0%</div>';
  resultsText += '</div>';
  resultsText += '<div class="flex-grid mb">';
  resultsText += '<div class="flex-two flex-fewer">';
  resultsText = resultsText + '<p style="margin: 0; font-size: 4em;">' + less + "%" + '</p>';
  resultsText += '<p style="margin: 0;">of similar sized organizations have automated <strong>fewer</strong> controls</p>';
  resultsText += '</div>';
  resultsText += '<div class="flex-two flex-same">';
  resultsText = resultsText + '<p style="margin: 0; font-size: 5em;">' + same + "%" + '</p>';
  resultsText += '<p style="margin: 0;">of similar sized organizations have automated the <strong>same</strong> number of controls</p>';
  resultsText += '</div>';
  resultsText += '<div class="flex-two flex-more">';
  resultsText = resultsText + '<p style="margin: 0; font-size: 4em;">' + more + "%" + '</p>';
  resultsText += '<p style="margin: 0;">of similar sized organizations have automated <strong>more</strong> controls</p>';
  resultsText += '</div>';
  resultsText += '</div>';
  resultsText += '</div>';

  $("#auto-con-calc").html(resultsText);
  sliderControl(less,same,more);
  $("#auto-con-calc").slideDown("fast", function() {
    $('html, body').animate({
       scrollTop: $('#auto-con-calc').offset().top
    }, 'slow');
  });
}

function update_progress_bar(index) {
  var checked = index;
  if ( checked === 0 ) {
    $(".progress-bar-insider").css("width", "4%");
  }
  else {
    checked = checked - 1;
    $(".progress-bar-insider").css("width", ((checked/15)*96 + 4) + "%");
  }
  if (checked < 16) {
    $(".progress-bar-insider").attr("data-progress", (checked + 1) + "/16");
  }
  else {
    $(".progress-bar-insider").attr("data-progress", "");
  }
}

$(".carousel--item input[type=radio]").click(function(){
  $("#auto-con-calc").slideUp();
  $('.nav--buttons--right').trigger('click');
});

function sliderControl(less, same, more) {
  var less_slider = $(".score-slider-less");
  var same_slider = $(".score-slider");
  var more_slider = $(".score-slider-more");

  if ( same < 5.00 ) {
    same_slider.css("width", "5%");
  }
  else {
    less_slider.css("width", same + "%");
  }
  same_slider.css("left", less + "%").html(same + "%");
  less_slider.css("width", (parseFloat(less) + (parseFloat(same) / 2)) + "%").html(less + "%");
  more_slider.css("width", (parseFloat(more) + (parseFloat(same) / 2)) + "%").html(more + "%");
}


            
          
!
999px
Loading ..................

Console