questions.blade.php 4.54 KB
<div class="layout-app"><!-- row-app -->
<div class="row row-app">
  <div class="col-md-12">
    <div class="col-separator col-separator-first box col-unscrollable">
      <div class="col-table" style='padding-left: 13px;padding-right: 13px;'>

<div class="innerAll" style='background: #fff;'>
  <legend class="task_legend">Authentication Questions<i class="pull-right" id="authArea"><i class="glyphicon glyphicon-plus-sign"></i></i></legend>

  <div id='form-group'>
    <div class="filterable table-responsive">
      <table class="table table-hover" style="margin: 0;"> 
        <thead class="panel-info">
          <tbody>
           @foreach($auth_questions as $question)
           <tr>
              <td>{{$question->question}}</td>
              <td>
                @for($i=1;$i<=4;$i++) 
                <?php $authopt_no = 'opt_'.$i;?>
                @if($question->$authopt_no != '')
                <label class="radio-inline">
                <input type="radio" class="authQuestion" id="opt_{{$question->id}}{{$i}}" name="authopt_{{$question->id}}" style="margin:0;">&nbsp;&nbsp;{{$question->$authopt_no}}</label>&nbsp;
                @endif
                @endfor
              </td>
            </tr>
            @endforeach
          </tbody>
        </thead>
      </table>
    </div>
  </div>
  <div class='container'>
    <input type="button" class="btn btn-danger" value="Submit" id='submit' style="float:right; margin: 5px 0;">
  </div>
  <hr style="clear:both;" />

  <legend class="task_legend">Primary Questions</legend>

  <div id="primary_ques" class="primary_ques" >
    <div class="row">
      <div class="col-md-4">
        @foreach($questions as $primary_question)
        <div class="question" data-ques="{{$primary_question->id}}" style="margin: 5px 0;">{{$primary_question->questions}}</div>
        <div>
        </div>
        <div class="options_div" id="options_div{{$primary_question->id}}">
          @for($i=1;$i<=10;$i++) 
          <?php $opt_no = 'opt_'.$i;?>
          @if($primary_question->$opt_no != '')
          <label class="options radio-inline" data-ques="{{$primary_question->id}}" data-ans="{{$i}}">
          <input type="radio" id="opt_{{$primary_question->id}}{{$i}}" name="opt_{{$primary_question->id}}" style="margin:0; padding:0;">&nbsp;&nbsp;{{$primary_question->$opt_no}}</label><br />
          @endif
          @endfor
          <textarea class="remarks form-control" name="remark{{$primary_question->id}}" id='remark{{$primary_question->id}}' style="border: 1px solid #cccccc;"></textarea>
          <input type="hidden" id="level{{$primary_question->id}}" name="level{{$primary_question->id}}" value="1">
        </div>
        @endforeach
        <input type="hidden" id="parent1" name="parent1" value="{{$qid}}">
      </div>
      <div class="col-md-8" id="childs{{$primary_question->id}}"></div>
    </div>
    <hr style="clear:both;padding: 4px 0 2px;" />
  </div>

</div>
<script>
  $(document).ready(function(){

    var auth_ques_count = '{{$auth_ques_count}}';

    $(".options_div").hide();
    $("#authArea").hide();
    $('input:radio:checked').prop('checked', false);

    $("#submit").click(function(){
      if ($(".authQuestion[type=radio]:checked").length == auth_ques_count) {
        $("#form-group").hide();
        $("#authArea").show();
        $("#submit").hide();
        $(".authQuestion").attr("disabled","disabled");
      }
      else {
        alert("Please answer all authentication questions");
      }
    });
       
    $('#primary_ques').on('click', '.question', function(){
      var ques = $(this).data("ques");
      $("#options_div" + ques).toggle();
    });

    $('#primary_ques').on('click', '.options', function(){
      var ques = $(this).data("ques");
      var ans = $(this).data("ans");
      if ( ! $("#opt_"+ques+ans).is(':disabled')) { 
        loadQuestions(ques, ans);
      }
    });

    function loadQuestions(ques, ans) {
      var level = parseInt($('#level'+ques).val());
      var next_level = level+1;
      var parent_id = '{{$qid}}';
      $("#options_div"+$('#parent'+level).val()+" input[type=radio]").attr("disabled","disabled");
      $.ajax({
        url: 'http://localhost:8000/questionare/'+ques+'/'+ans+'/'+next_level,
        error: function() {
          $('#childs'+ques).html('<p>An error has occurred</p>');
        },
        dataType: 'html',
        success: function(data) {
          $('#childs'+ques).html(data);
        }
      });
    }

    $("#authArea").click(function(){
      $("#form-group").toggle();
    });
  });
</script>
      
      </div>
    </div>
  </div>
</div>
    </div>