JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<!-- QUESTION -->
<textarea>
0 - 1 + 2 * 3
</textarea>

<!-- QUESTION -->
<textarea>
0 / 1 + 2 * 3
</textarea>

<!-- QUESTION -->
<textarea>
0 ? 1 : 2
</textarea>

<!-- QUESTION -->
<textarea>
0 || 1 && 2
</textarea>

<!-- QUESTION -->
<textarea>
0 || 1 || 2
</textarea>

<!-- QUESTION -->
<textarea>
0 | 1 & 2
</textarea>

<!-- QUESTION -->
<textarea>
0 & 1 | 2
</textarea>

<!-- QUESTION -->
<textarea>
Math.PI << 1
</textarea>

<!-- QUESTION -->
<textarea>
~~Math.PI
</textarea>

<!-- QUESTION -->
<textarea>
Math.PI >> 0
</textarea>

<!-- QUESTION -->
<textarea>
"12" + 3
</textarea>

<!-- QUESTION -->
<textarea>
12 + "3"
</textarea>

<!-- QUESTION -->
<textarea>
+"12" + 3
</textarea>

<!-- QUESTION -->
<textarea>
3..toString()
</textarea>

<!-- QUESTION -->
<textarea>
(0, 1, 2, 3, 4) + 5
</textarea>

<!-- QUESTION -->
<textarea>
typeof null
</textarea>

<!-- QUESTION -->
<textarea>
typeof []
</textarea>

<!-- QUESTION -->
<textarea>
typeof String("foo")
</textarea>

<!-- QUESTION -->
<textarea>
typeof new String("foo")
</textarea>

<!-- QUESTION -->
<textarea>
!!true
</textarea>

<!-- QUESTION -->
<textarea>
typeof !!!!!!!!!!!!!!!!!!!!!true
</textarea>

<!-- QUESTION -->
<textarea>
null == false
</textarea>

<!-- QUESTION -->
<textarea>
null === false
</textarea>

<!-- QUESTION -->
<textarea>
"" == 0
</textarea>

<!-- QUESTION -->
<textarea>
"" === 0
</textarea>

<!-- QUESTION -->
<textarea>
(function(a, b, c, d){}).length
</textarea>

<!-- QUESTION -->
<textarea>
typeof function(){}()
</textarea>

<!-- QUESTION -->
<textarea>
(function(){
  return !!this;
}).call(false)
</textarea>

<!-- QUESTION -->
<textarea>
(function(a, b, c, d, e){
  return arguments.length;
})(1, 2, 3, 4, 5, 6)
</textarea>

<!-- QUESTION -->
<textarea>
(function(){
  return typeof document;
  var document = 1;
})()
</textarea>

<!-- QUESTION -->
<textarea>
typeof (function(){
  return
  1;
})()
</textarea>

CSS

/**
 *  @fileoverview  JSQuiz
 *  @author        Tohl SMALLFIELD
 */
/*------------------------------------------------------------------------------

                リセット
                
------------------------------------------------------------------------------*/
html,
body,
a,button,
div,p,
h1,h2,h3,
ol,li,
form,input,label,
iframe{
  margin: 0;
  padding: 0;
  background: transparent none no-repeat scroll 0 0;
  border-style: none;
  outline: none;
  list-style-type: none;
}

header,section{
  display: block;
}



/*------------------------------------------------------------------------------

                clearFix
                
------------------------------------------------------------------------------*/
form:after,
section:after,
div.digits:after,
div.digits div:after,
p.btns:after
{
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 0;
  content: ".";
}



/*------------------------------------------------------------------------------

              テキスト画像代替
              
------------------------------------------------------------------------------*/
h1,h2,h3,
button,a,
label
{
  display: block;
  margin: 0;
  padding: 0;
  border-style: none;
  text-indent: -10000px;
  text-decoration: none;
  text-align: left;
}



/*------------------------------------------------------------------------------

                
                
------------------------------------------------------------------------------*/
body{
  overflow: hidden;
  background-color: #000f1e;
  background: -moz-linear-gradient(top, #000f1e, #0064c9, #000f1e);
  background: -webkit-gradient(linear, left top, left bottom,
from(#002346), color-stop(0.5, #0064c9), to(#000f1e));  background: -webkit-gradient(linear, left top, left bottom, from(#002346), color-stop(0.5, #0064c9), to(#000f1e));
  font-family: myriad, verdana, osaka, sans-serif;
}

section{
  margin-bottom: 12px;
  margin-right:   9px;
  margin-left:  ...

JavaScript

/**
 *  @fileoverview  JSQuiz
 *  @author        Tohl SMALLFIELD
 */
(function(sandbox, HTML, Tweener){///////////////////////////////////////////////////////////////////////////
    var win = this,
        doc = win.document,
        bdy = doc.body,
        $ = function(xpr){
            return doc.querySelector(xpr);
        },
        $$ = function(xpr){
            return doc.querySelectorAll(xpr);
        };
    
    var RANDOM             = true,
        SHOW_ANSWER        = false,
        HIGHLIGHT_CODE     = true,
        QUESTION_MAX       = 10,
        POINT_PER_QUESTION = 100,
        TIME_LIMIT_MS      = 30000;
    
    var createDigits = function(xpr){
        var elm = $(xpr).appendChild( doc.createElement("div") ),
            rgx = /(\d)/g,
            cur = 0,
            wrn = 0;
        return {
            get : function(){
                return cur;
            },
            show : function(num){
                cur = num;
                if(cur < wrn && !/\bwarning\b/.test(bdy.className) ) bdy.className += " warning";
                elm.innerHTML = (num + "").replace(/\./g, '<p class="d dd"></p>').replace(rgx, '<p class="d d$1"></p>');
                return this;
            },
            warnUnder : function(num){
                wrn = num;
                return this;
            },
            inc : function(num){
                if(!arguments.length) num = 1;
                this.show( cur += num );
                return this;
            },
            dec : function(num){
                if(!arguments.length) num = 1;
                this.show( cur -= num );
                return this;
            },
            reset : function(){
                this.show( cur = 0 );
                bdy.className = bdy.className.replace(/\bwarning\b/g, "");
                return this;
            }
        };
    };
    
    var codes = function(html){
        var ret = [],
            txt = $$("textarea"),
            t,v,
            len =...