Questionnaire

index.html

<div class="wrapper" ng-app="questionaire" ng-controller="qaCtrl">
  <div class="qa-panel">
    <button type="button" class="startBtn" ng-click="openQuestions()" ng-hide="!hideInput">start</button>
    <div class="qa-panel-label">
      <span ng-bind="currentLabel"></span>
    </div>
    <button type="button" ng-show="quizComplete" class="cancelBtn" ng-click="cancelQuestions()">
        restart</button>
    <div class="qa-panel-input" ng-hide="hideInput || quizComplete">
      
      <div class="progressbar-back">
        <div class="progressbar" ng-style="{'width' : progresspercentage}"></div>
      </div>
      
      <div class="animate-switch-container"
           ng-switch on="questionType">
        <div class="animate-switch" ng-switch-when="text">
          <input type="text"/>
        </div>
        <div class="animate-switch" ng-switch-when="dropdown">
          <select>
            <option ng-repeat="option in currentValues" value="{{option.id}}">{{option.value}}</option>
          </select>
        </div>
        <div class="animate-switch" ng-switch-when="radio">
          <div ng-repeat="option in currentValues">
            <input type="radio" name="radioquestion" id="qa_{{option.id}}" value="{{option.id}}"/><label ng-bind="option.value" for="qa_{{option.id}}"></label>
          </div>
        </div>
        <div class="animate-switch" ng-switch-when="checkbox">
          <div ng-repeat="option in currentValues">
            <input type="checkbox" id="qa_{{option.id}}" value="{{option.id}}"/><label ng-bind="option.value" for="qa_{{option.id}}"></label>
          </div>
        </div>
      </div>
      <div style="margin:0 12px 12px;">
      <div class="questionnum">
        <span ng-bind="currentQuestion"></span> / 
        <span ng-bind="totalNumber"></span>
      </div>
      <button type="button" ng-click="prevQuestion()">
        <i class="fa fa-angle-left"></i>&nbsp;prev</button>
      <button type="button" ng-click="nextQuestion()">
        submit</button>
      <button type="button" class="cancelBtn" ng-click="cancelQuestions()">
        cancel</button>
      </div>
    </div>
  </div>
</div>

questionnaire.markdown

Questionnaire

A Pen by Eoin Fanning on CodePen.

License.

script.js

var questions = [
  { label: "What was your first car?", type: "text", values: []},
  { label: "Sex?", type: "radio", values: [
    {id:"1", value: "Male"},
    {id:"2", value: "Female"},
    {id:"3", value: "Other"}]
  },
  { label: "How are you feeling?", type: "dropdown", values: [
    {id:"1", value: "Happy"},
    {id:"2", value: "Sad"},
    {id:"3", value: "Angry"}]
  },
  { label: "Your favourite Fruit", type: "checkbox", values: [
    {id:"1", value: "Apples"},
    {id:"2", value: "Bananas"},
    {id:"3", value: "Oranges"},
    {id:"4", value: "Strawberries"}]
  }
];

var app = angular.module('questionaire', []);
var currPos = 0;

app.controller('qaCtrl', function($scope, $timeout) {
  $scope.answers = {};
  
  $scope.quizComplete = false;
  $scope.progresspercentage = '0%';
  $scope.questionType = "text";
  $scope.currentQuestion = 1;
  $scope.totalNumber = questions.length;
  $scope.currentLabel = "Additional Questions";
  $scope.currentValues = [];
  $scope.hideInput = true;
  $scope.openQuestions = function() {
    $scope.hideInput = false;
    populateQuestion();
  };
  $scope.nextQuestion = function(){
    var thisquestion = questions.length;
    if($scope.currentQuestion < questions.length){
      thisquestion = $scope.currentQuestion;
      $scope.currentQuestion++;
      populateQuestion();
    }
    if($scope.currentQuestion <= questions.length)
      currPos++;
    
    questionProgressStyle(currPos);
  };
  $scope.prevQuestion = function(){
    if($scope.currentQuestion >= 2){
      $scope.currentQuestion--;
    }
    if($scope.currentQuestion >= 1)
      currPos--;
    
    populateQuestion();
    console.log(currPos);
    questionProgressStyle(currPos);
  };
  
  $scope.cancelQuestions = function(){
    $scope.currentLabel = "Additional Questions";
    $scope.hideInput = true;
    $scope.quizComplete = false;
    $scope.currentValues = [];
    $scope.currentQuestion = 1;
    currPos = 0;
    $scope.progresspercentage = "0%";
  }
  
  $scope.questionNumberProgress = function(){
    var curr = $scope.currentQuestion;
    var total = questions.length;
    return curr + ' of ' + total;
  }
  
  //Calculate the completed percentage for progress bar
  var questionProgressStyle = function(curr){
    var percentage = 100;
    var total = $scope.totalNumber;
    if(curr == 0)
      percentage = 0;
    else if(curr < total)
      percentage = (curr/total)*100;
    
    $scope.progresspercentage = percentage + "%";
    
    if(percentage === 100) {
      $timeout( function(){
          $scope.quizComplete = true;
          $scope.currentLabel = "Thank you!";
        }, 1000 );
    }
  }
  
  var populateQuestion = function(){
    var thisQuestion = questions[$scope.currentQuestion - 1];
    $scope.currentLabel = thisQuestion.label;
    $scope.questionType = thisQuestion.type;
    $scope.currentValues = thisQuestion.values;
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.js"></script>

style.less

@light-grey: #eeeef4;
@offwhite: #fefefe;
@small-size: 6px;
@medium-size: 12px;
@large-size: 22px;

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "HelveticaNeue-UltraLight", "Helvetica Ultra Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.wrapper{
  background: @light-grey;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .qa-panel{
    background: @offwhite;
    margin: @medium-size 0;
    min-width: 500px;
    position: relative;
    
    -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.08);
    -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.08);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
    
    button{
      cursor: pointer;
      padding: @small-size @medium-size;
      color: grey;
      text-transform: uppercase;
      font-size: @medium-size;
      background: transparent;
      border: none;
      
      &.startBtn, &.cancelBtn{
        position: absolute;
        right: @medium-size; top: @medium-size;
      }
    }
    
    .qa-panel-label{
      font-size: @large-size;
      color: #003959;
      margin: @medium-size;
      i.qa-icon{
        font-weight: bold;
        float: right;
      }
      
    }
    
    .qa-panel-input{
      
      select, input[type="text"]{
        width:100%;
        padding: @small-size @medium-size;
        display: block;
        margin-top: @medium-size;
        outline: none;
        box-shadow: none;
        border: 1px solid grey;
        
        &:focus {
          border-color: #003469;
        }
      }
      div.questionnum{
        float: right;
        margin-top: @small-size;
        color: #aaa;
      }
      .progressbar-back{
        width:100%;
        height: 2px;
        background: #eee;
        margin-top: @medium-size;
        margin-right: -@medium-size;
      }
      .progressbar{
        width: 0%;
        height: 3px;
        background: green;
        -webkit-transition: width 1s; /* Safari */
        transition: width 1s;
      }
    }
    
    &:hover{
      i.qa-icon{
        color: blue;
      }
    }
  }
  
  button{
    outline: none;
    &:active{
      border: none;
    }
  }
}


//Animation
.animate-switch-container {
  position:relative;
  overflow:hidden;
}

.animate-switch {
  padding:10px;
}

.animate-switch.ng-animate {
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.animate-switch.ng-leave.ng-leave-active,
.animate-switch.ng-enter {
  top:-50px;
}
.animate-switch.ng-leave,
.animate-switch.ng-enter.ng-enter-active {
  top:0;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />