JSFiddle - React, Tailwind, and code Playground

by deswolf

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="question-group">
<h3><input type="text" data-elem="title" placeholder="Please fill in question group name..." value="title_group_1"/></h3>
  <div class="question">
  <input type="text" data-elem="title" value="test"/>
  <select data-elem="answerType">
  <option value="numeric">numbers</option>
  <option value="radio">ye/no</option>
  </select>
  <input type="text" data-elem="validation.min" value="0"/>
  <input type="text" data-elem="validation.max" value="33"/>
  <input type="text" data-elem="sourceIndicatorId" value="9898"/>
  </div><!---->

  <div class="question">
  <input type="text" data-elem="title" value="xdd"/>
  <select data-elem="answerType">
  <option value="numeric">numbers</option>
  <option value="radio">ye/no</option>
  </select>
  <input type="text" data-elem="validation.min" value="1"/>
  <input type="text" data-elem="validation.max" value="55"/>
  <input type="text" data-elem="sourceIndicatorId" value="1111"/>
  </div><!---->
</div>
<div class="question-group">
<h3><input type="text" placeholder="Please fill in question group name..." data-elem="title" value="title_group_2"/></h3>
  <div class="question">
  <input type="text" data-elem="title" value="loremipsum"/>
  <select data-elem="answerType">
  <option value="numeric">numbers</option>
  <option value="radio">ye/no</option>
  </select>
  <input type="text" data-elem="validation.min" value="0"/>
  <input type="text" data-elem="validation.max" value="45"/>
  <input type="text" data-elem="sourceIndicatorId" value="9876"/>
  </div><!---->
</div>
<a href="#" id="logme">Log</a>
<div id="cl"></div>

CSS

body {font-family:sans-serif;}
a#logme {
  padding:10px 40px;
  display:inline-block;
  background:#333;
  color:#fff;
  text-decoration:none;
  border:1px solid black;
  border-radius:3px;
  margin-top:10px;
}
a#logme:hover {background:#484848}
h3 > input {font-weight:bold;width:100%;}
#cl {line-height:24px;letter-spacing:1px;margin-top:10px;background:white;}
.highlight {color:#bb34ed;}

JavaScript

function objTemplate(questions, subquestions) {
	this.questions = questions;
  this.subQuestions = subquestions;
}

function objQuestionGroup(title,questions) {
	this.title = title;
  this.questions = questions;
}

function objQuestionStructure(hasSubQuestions, title, answerType, min, max, sourceIndicatorId){
    this.hasSubQuestions = hasSubQuestions;
    this.title = title;
    this.answerType = answerType;
    this.validation = new objValidationStructure(min,max);
    this.sourceIndicatorId = sourceIndicatorId; //int
}

function objValidationStructure(min,max) {
	this.max = max; //int
	this.min = min; //int
}

//var qs = new questionStructure(true,"test","numeric",0,30,9999);
//console.log(qs);

function recordsQuestions() {
var all_questionGroups = [];
$(".question-group").each(function(a) {
	var qg = new objQuestionGroup(null,null);
  var qg_title = $(this).children("h3").children("[data-elem]");
  qg[qg_title.data("elem")] = qg_title.val();
  //console.log(qg_title);
  var all_questions = [];
  $(this).find(".question").each(function(i) {
      var qs = new objQuestionStructure(false,null,null,null,null,null);
      $(this).find("[data-elem]").each(function(j) {
          var key = splitDataElem($(this).data("elem"));
          var value = $(this).val(); //check if value is number function needed here
          if (key.length > 1) {
          	qs[key[0]][key[1]] = value;
          } else {
          	qs[key[0]] = value;
          }
      });
      all_questions.push(qs);
  });
  qg.questions = all_questions;
  all_questionGroups.push(qg);
  //var questions = {questions: all};
});
var output = new objTemplate(all_questionGroups,null);
cl(output);
}

function splitDataElem(str) {
	return str.split('.');
}

$("#logme").click(function() {
  recordsQuestions();
});

function cl(msg) {
	console.log(msg);
  var regex = /"([^"]+)"/g;
	msg = JSON.stringify(msg);
	msg = msg.replace(regex, "\"<span class='highlight'>$1</span>\"");
  $("#cl").html(msg);
}