JSFiddle - React, Tailwind, and code Playground

by dougneiner

HTML

<div id="survey">
</div>

CSS

header { position: fixed; height: 50px; background: #eee; border-bottom: solid 2px black; width: 100%; top: 0; left: 0; }
        header h1 { padding: 0 10px; margin: 0; line-height: 50px; height: 50px; }
        header button { position: absolute; right: 10px; top: 15px; }
        body { padding-top: 70px; }

JavaScript

(function ($) {

$.widget( "ria.survey", {
    options: {
        completeText: "complete",
        submitText: "Submit",
        questions: []
    },
    
    $header: null,
    $submit: null,
    
    percent: 0,
    total: 0,
    
    _create: function () {
        this.element.html(
            [
                "<header>",
                    "<hgroup>",
                    "<h1>50% complete</h1>",
                        "<button>Submit</button>",
                    "</hgroup>",
                "</header>",
                "<ul class='questions'>",
                "</ul>"
            ].join( "" )
        );
        
        this.$header = this.element.find( "h1" );
        this.$submit = this.element.find( "button" );
        
        this.$questions = this.element.find( "ul" );
        
        var $questions = this.$questions;
        
        $.each( this.options.questions, function( i, q ) {
            $( "<li>" ).question({ questionText: q }).appendTo( $questions );
        });
        
        this.total = this.options.questions.length;
        
        var widget = this;
        
        this.element.bind( "change." + this.widgetName, function () {
            var answered = $questions.find( "input:checked" ).length;
            widget.percent = (answered / widget.total) * 100;
            widget.refresh();
        });
        
        this.option( this.options );
    },
    
    refresh: function () {
        this.$header.html( this.percent + "% " + this.options.completeText );
    },
    
    _setOption: function ( key, value ) {
        $.Widget.prototype._setOption.apply( this, arguments );
        
        if ( key === "completeText" ) {
            this.refresh();
        }
        if ( key === "submitText" ) {
            this.$submit.html( value )
        }
    }
});

var idCounter = 0;

$.widget( "ria.question", {
    options: {
        questionText: "This is my question",
        answer: null
    },
    
    _create: function () {
       ...