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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

            
              <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
    
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-number="none">About HRD <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#" data-number="1">Structure</a></li>
            <li><a href="#" data-number="2">HR BP's</a></li>
            <li><a href="#" data-number="3">CW BP's</a></li>
            <li><a href="#" data-number="4">Human Capital Strategy</a></li>
            <li><a href="#" data-number="5">Contact Us</a></li>
          </ul>
        </li>
        
        
        
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-number="none">Compensation & Benefits
            <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a data-number="6" href="#">Compensation </a></li>
            <li><a href="#" data-number="7">Benefits </a></li>
            <li><a href="#" data-number="8">Recognition </a></li>
          </ul>
        </li>
        
        
           <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-number="none">Employment
            <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a data-number="9" href="#">Career Management </a></li>
            <li><a href="#" data-number="10">Labor Relations </a></li>
            <li><a href="#" data-number="11">Pre-Boarding </a></li>
            <li><a href="#" data-number="12">On-Boarding </a></li>
            <li><a href="#" data-number="13">Off-Boarding </a></li>
            <li><a href="#" data-number="14">Career Opportunities </a></li>
          </ul>
        </li>
        
         <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-number="none">Learning & Development
            <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a data-number="15" href="#">Development </a></li>
            <li><a data-number="16" href="#">Career Services </a></li>
            <li><a href="#" data-number="17">Diversity and Inclusion </a></li>
            <li><a data-number="18" href="#">Mobility Program </a></li>
            <li><a href="#" data-number="19">Supervisors Toolkit </a></li>
  
          </ul>
        </li>
        
        
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-number="none">Performance Management
            <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a data-number="20" href="#">Career Point </a></li>
            <li><a href="#" data-number="21">Performance Management Toolkit </a></li>
          </ul>
        </li>
         
        
         <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-number="none">Complementary Workforce
            <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a data-number="22" href="#">Modalities </a></li>
            <li><a data-number="23" href="#">Services for CW </a></li>
          </ul>
        </li>
        
        
            <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-number="none">HR Resources & Analytics
            <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#" data-number="24">HR Analytics Dashboard </a></li>
            <li><a data-number="25" href="#">HR Business Partner Forms </a></li>
             <li><a href="#" data-number="26">Complementary Workforce Toolkit </a></li>
          </ul>
        </li>
      </ul>
     
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<section id="test-ui">
  <h2 style="font-weight: bold">Scenario #<span class="scenario-num"></span></h2>
  <h2 class="scenario"></h2>
  <h2 class="feedback">Passed!</h2>
  <h3 class="hide"><span class="num-of-clicks">0</span> Clicks</h3>
  
  <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>
  <p class="prog">  </p>
  
  
  
  <button type="button" class="btn btn-success hide"> NEXT </button>
</section>

<section id="reportCard" class="hide">
  <h2>The results are in...</h2>
  <table class="table table-striped">
    <thead>
      <tr>
        <td><strong>Scenario</strong></td>
        <td><strong>No. of Clicks to solve</strong></td>
      </tr>
    </thead>
    <tbody id="results">
      
    </tbody>
</table>
</section>


</section>
            
          
!
            
              body {
  font-size: 13px;
}

#test-ui {
  margin:auto;
  text-align: center;
  margin-top: 200px;
}

.num-of-clicks {
  color: #f98428;
}


h1 {font-size: 50px;}

.feedback {
  font-weight: bold;
  color: #f1f1f1;
  transition: 0.2s ease all;
}

.passed {
  color: #5cb85c;
}


.progress {
  width: 50%;
  margin: 30px auto;
  max-width: 500px;
}


#reportCard {
  width: 50%;
  max-width: 500px;
  font-size: 15px;
  margin: 0 auto;
}
            
          
!
            
              //QUESTION DATA
var questions = [
  {
    text: "I am interested to learn about how HRD is organized and structured...",
    answer: "1"
    },
  {
    text: "I need to contact HRD",
    answer: "5"
    },
    {
    text: "I want to check information on Labor Relations",
    answer: "10"
    },
    {
    text: "I want to find the schedule for Career Services Workshops",
    answer: "16"
    },
      {
    text: "I want to read more about my Benefits",
    answer: "7"
    },
    {
    text: "I'm an HR Business Partner, I need to access my talent management forms",
    answer: "25"
    },
      {
    text: "I'm an employee looking to read about the various Complementary Workforce modalities",
    answer: "22"
    },
       {
    text: "I'm ending my contract with the Bank, I want to learn about the off-boarding steps I should follow.",
    answer: "13"
    },
         {
    text: "I need to access the Career Point system for my performance management",
    answer: "20"
    },
           {
    text: "I'm a Staff member looking for information on how to manage my career at the Bank",
    answer: "9"
    },
    {
    text: "I need to access the HR Analytics Dashboard",
    answer: "24"
    },
   {
    text: "I'm an RPA looking for resources to expedite the hiring process of Contractuals",
    answer: "26"
    },
     {
    text: "I would like to learn more about how the Bank promotes Diversity and Inclusion",
    answer: "17"
    },
      {
    text: "I need information on the Bank's mobility program",
    answer: "18"
    },
        {
    text: "I need information on the Human Capital Strategy",
    answer: "4"
    },
         {
    text: "I'm a staff member looking to contact my HR Business Partner (BP)",
    answer: "2"
    },
 ];
  
var reportCard = []; 





//QUIZ OBJECT
function Quiz(questions) {
  this.questions = questions;
  this.length = questions.length;
  this.currentQuestion = 1;  
}

Quiz.prototype.evaluateAnswer = function (questionIndex, clickedItem){
  

  if(this.questions[questionIndex - 1].answer === clickedItem) {
    //say good job
    $(".feedback").addClass("passed");
    
    //store result in report Card
    reportCard.push(
      {
        scenario: this.currentQuestion, 
        clicksToSolve: getClickCount() 
      }
       );
    
    //move question
    $(".btn-success").removeClass("hide").focus();
  } 
  
}


Quiz.prototype.outputResults = function(resultsData) {
  
  var reportCardTable = $("#reportCard");
  var reportCard = $("#results");
  
  
  for(var i = 0; i < resultsData.length; i++) {
    var scenario = resultsData[i].scenario;
    var clicks = resultsData[i].clicksToSolve;
    var contextClass;
    
    if(clicks <= 3) {
     contextClass = "success";
  } 
    else if (clicks > 3 && clicks <= 5) {
    contextClass = "warning";
  } 
    else {
     contextClass = "danger";
  }
    
    // create the report card
    reportCard.append(
      "<tr class=" + contextClass + "><td>" + scenario + 
      "</td><td><strong>" + clicks + 
      "</strong></td></tr>");
  
   // show the report card
    reportCardTable.removeClass("hide");
    
  }
}




Quiz.prototype.renderQuestion = function(questionIndex) {
  
  var index = questionIndex - 1;
 
 
  if(index <= this.length - 1) {
     var text = this.questions[index].text;
    var scenario = $(".scenario");
    var scenarioNum = $(".scenario-num"); 
    var progress = $(".prog");
    var progressBar = $(".progress-bar");
    var percentageCompleted = ((this.currentQuestion / this.length) * 100 ) + "%";
    
    //populate scenario
    scenarioNum.text(this.currentQuestion);
    
    //populate question
    scenario.text(text);
    
    //populate progress
    progress.text("Question " + this.currentQuestion + " of " + this.length);
    progressBar.css("width", percentageCompleted);
    
  }
  
  else 
  {
    
    $("#test-ui").addClass("hide");
    this.outputResults(reportCard);
  }
  
}




var test = new Quiz(questions); // instantiate new quiz object

test.renderQuestion(test.currentQuestion);






// UI CODE

  var numOfClicks = 0;
  
  // counter of clicks function
  function addClick(){
  
     return numOfClicks+= 1;
  }
  
  //utility function
  function getClickCount() {
    return numOfClicks;
  }
  
  
  $("a").on("click", function(e){
    var num = $(".num-of-clicks");
    var itemNum = $(this).data().number.toString() || 0;
    
    num.text(addClick()); // update UI
    
    //tigger evaluate function
    test.evaluateAnswer(test.currentQuestion, itemNum)

  });
  
  
  //NEXT
  $(".btn-success").on("click", function(){
    
  
    numOfClicks = 0; //reset counter
     $(".num-of-clicks").text(numOfClicks);
    
    
    test.renderQuestion(test.currentQuestion += 1);
    
    $(this).addClass("hide");
    $(".feedback").removeClass("passed");
   
  });
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console