Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.5/jsrender.min.js"></script>
</head>
<body>
  <div id="main-quiz">
    
  </div>
  <button class="btn-submit">Submit answers</button>
  
  <script id="tmplForm" type="text/x-jsrender">
    <section id="section-{{:id}}" data-id="{{:id}}">
      
      <div class="section-top">
        <hr class="hideOnMobile">
        <h1 class="top-title">#{{:id}} {{:category}}</h1>
        <p class="title optionsTitle {{:category}} titleFor_{{:id}}">{{:header}}</p>
      </div>
      
      <div class="section-bottom">
        And this is bottom div
        
        {{for questions}}
          <div data-id="{{:id}}" class="question question{{:category_id}}" data-parentid="{{:#parent.data.id}}">
            <p class="questionP questionId_{{:id}}">{{:question}}</p>
            
            <ul id="questionId-{{:id}}" class="answerContainer">
              
              {{for answers}}
                <li data-id="{{:id}}" data-parentid="{{:#parent.parent.data.id}}">
                  <label for="answer_{{:#parent.parent.parent.parent.data.id}}_{{:#parent.parent.data.id}}_{{:id}}">
                    <input data-id="{{:#parent.parent.parent.parent.data.id}}_{{:#parent.parent.data.id}}_{{:id}}" type="radio" 
                    name="answer_{{:#parent.parent.parent.parent.data.id}}_{{:#parent.parent.data.id}}" 
                    id="answer_{{:#parent.parent.parent.parent.data.id}}_{{:#parent.parent.data.id}}_{{:id}}" 
                    value="{{:answer}}" />
                    {{:answer}}
                  </label>
                </li>
              {{/for}}
              
            </ul>
          </div>
        {{/for}}
        
      </div>
    </section>
  </script>
</body>
</html>
 
$(function() {
​
  var formData = [];
  var settings = [
    // categories
    'https://api.myjson.com/bins/nilct',
    // questions
    'https://api.myjson.com/bins/1178p1',
    // answers
    'https://api.myjson.com/bins/qhft1',
  ];
  
  
  // if Promises are available, use this code
  /*
  Promise.all([
    getData(settings[0]),
    getData(settings[1]),
    getData(settings[2])
  ]).then(function(allData) {
    var categories = allData[0],
        questions = allData[1],
        answers = allData[2];
    
    formData = categories;
      // now that we have all questions, append them to categories
      formData.forEach(function(x) {
        x.questions = questions;
        // now that we have all answers, append them to questions
        x.questions.forEach(function(y) {
          y.answers = answers;
        });
      });
      
    processData(formData, '#tmplForm', '#main-quiz');
    $('.btn-submit').show();
  }); */
  
  // if you can't use Promises, use the code below
  $.getJSON(settings[0], function(data) { 
    formData = data;
    
    $.getJSON(settings[1], function(data) {
      
      // now that we have all questions, append them to categories
      formData.forEach(function(x) {
        x.questions = data;
      });
      
      $.getJSON(settings[2], function(data) {
        
        // now that we have all answers, append them to questions
        formData.forEach(function(x) {
          x.questions.forEach(function(y) {
            y.answers = data;
          });
        });
        
        // console.log(JSON.stringify(formData, null, 4))
        processData(formData, '#tmplForm', '#main-quiz');
        $('.btn-submit').show();
      });
    });
  });
  /* */
​
  // submit button event
  $('.btn-submit').on('click', submitData);
});
​
function processData(data, scriptTmpl, appendTo) {
  // get the template
  var template = $.templates(scriptTmpl);
  // convert to HTML
  var htmlOutput = template.render(data);
  // append to html element
  $(appendTo).append(htmlOutput);
}
​
function submitData(evt) {
  var answersData = [];
  var questions = $('#main-quiz .question');
  console.log('FOUND ' + questions.length + ' questions');
  
  questions.each(function (i, q) {
    var question = $(q);
    var answer = $(q).find('input[type="radio"]:checked');
    answersData.push({
      id: answer.data('id') || '', 
      answer: answer.val() || '' });
  });
  
  console.log(JSON.stringify(answersData, null, 4));
}
​
function getData(url) {
  return new Promise(function(resolve, reject) {
    $.getJSON(url, function(data) { resolve(data); });
  });
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
balexandrepro
0viewers