JSFiddle - React, Tailwind, and code Playground

by Mike Gleeson

HTML

<div id='test'></div>

CSS

.dtHeader {
    height:10%;
}

.dtQuestion {
    background: red;
    padding: 20px;
}

.dtAnswered:after {
    content: '>>';
}

.dtAnswer td{
    border-bottom: 2px solid black;
    padding: 20px;
}

.dtAnswer td:hover{
    background-color:green;
    cursor: pointer;
}

JavaScript

var _questions = [
    {Question: {Text:"How do we register the product at drug approval authorities?", 
    Answers: [{Text: "As a Line Extension", QuestionID: 1}, {Text: "Applying for a New Marketing Authorization", QuestionID: 2}]
    }},
{Question: {Text:"Building on which existing product?" 
 Answers: [{Text: "Optisulin® / Veluxus®", QuestionID: 3}, {Text: "Lantus®", QuestionID: 4}]}}, 
 {Question: {Text:"New Marketing Authorization <input type='text'/>"}}];

function util_decisionTreeHtml(Question) {
    var _tableHtml = "<table class='dtTable' data-attr-current-q='0'><tbody><tr class='dtHeader'><td></td></tr><tr class='dtBody'>";
    
    var _question = Question.Question;
    _tableHtml += "<td class='dtQuestion'>"+_question.Text+"</td>";
    _tableHtml += "<td><table><tbody>";
    
    if(_question.Answers) {
        for (var i = 0; i < _question.Answers.length; i++) {
            var _answer = _question.Answers[i];
            _tableHtml += "<tr class='dtAnswer'><td data-attr-question='"+_answer.QuestionID+"')'>" + _answer.Text;
            _tableHtml += "</td></tr>";         
        }     
    }
    _tableHtml += "</td>";
    _tableHtml += "</tr></tbody></table>";
    return _tableHtml;
}

function util_bindDecisionTrees() {
    $(".dtAnswer").click(function() {
        var _this = $(this);
        var _questionID = _this.children().attr('data-attr-question');
        _this.css({'background-color': 'lightgreen', 'opacity': '1'});
        _this.siblings().css({'background-color': 'transparent', 'opacity': '0.5'});
        if(_questionID) {
            var _question = $(".dtHeader").text() + "» " + $(".dtQuestion").text();
            $(".dtHeader").text(_question);
            $(".dtQuestion").text(_questions[_questionID].Text);
        }
    });
}

var _table = util_decisionTreeHtml(_questions[0]);
$("#test").html(_table);
util_bindDecisionTrees();