JSFiddle - React, Tailwind, and code Playground

by JThomas

HTML

<div class="question"> <span class="text">
        Do you own a TV?
    </span>

    <div class="options">
        <label>Yes
            <input type="radio" name="control-inplace" />
        </label>
        <label>No
            <input type="radio" name="control-inplace" />
        </label>
    </div>
    <textarea name="comment" cols="30" rows="5" placeholder="Comments"></textarea>
</div>
<div id="completed-questions">
    <div class="question"> <span class="text">
        Do you own a Radio?
    </span>

        <div class="options">
            <label>Yes
                <input type="radio" name="control-inplace_1" checked="checked" />
            </label>
            <label>No
                <input type="radio" name="control-inplace_1" />
            </label>
        </div>
        <textarea name="comment" cols="30" rows="5" placeholder="Comments">It is from 1990</textarea>
    </div>
</div>

CSS

html, body {
    font: 1em/1.68'Helvetica', Arial, sans-serif;
}
textarea {
    vertical-align: middle;
    overflow: auto;
}
.question {
    color: #444;
    padding: 10px 5px;
    font-size: 1.375em;
    border-bottom: 1px solid #999;
}
.question.current {
    box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.65);
}
.question .text {
    display: block;
}
.question .options {
    display: inline-block;
    margin: 0 20px;
}
#completed-questions {
    margin-top: 100px;
}
#completed-questions .question {
    border-top: 1px solid #999;
}

JavaScript

window.forEach = function (collection, callback) {
    for (var i = 0; i < collection.length; i++) {
        callback(i, collection[i]);
    }
};

window.hasClass = function (ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
window.addClass = function (ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}
window.removeClass = function (ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function slideSurvey(options) {
    var o = options,
        currentEl,
        questions,
        self = this;

    function init() {
        if (!o.questionClass) console.log('question class required');

        questions = document.querySelectorAll(o.questionClass);

        forEach(questions, function (i, e) {
            e.style.display = 'none';
        });

        _setCurrent();
    }
    
    function _setCurrent(){
        questions[0].style.display = 'block';
        addClass(questions[0], 'current');
    }

    init();
};

slideSurvey({
    questionClass: '.question'
});