JSFiddle - React, Tailwind, and code Playground

by abbylangner

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width">
        <title>Interactive Polynomial Vocabulary Activity</title>
        <meta name="description" content="Learn vocabulary related to identifying polynomials with this activity.">
		<meta name="keywords" content="polynomials, interactive, immediate-feedback, tutorial">
        <link rel="stylesheet" href="global.css" type="text/css">
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="activity.js"></script>
    </head>
    <body>
		<header>	
			<h1>Interactive Polynomial Vocabulary Activity</h1>
			<p>
				Using the drop-down selectors, 
				classify the polynomial and identify its leading coefficient and constant.
			</p>
		</header>
		<div class="wrapper">
			<section id="display">
				<h2>Polynomial</h2>
				<div id="polynomial" class="polynomial">
					Lorem ipsum dolor sit amet
				</div>
			</section>
			<section id="controls">
				<h2>Vocabulary</h2>
				<p class="prop">
					<label for="vocab-classify">Classification:</label>
					<select id="vocab-classifyDegree"></select>
					<select id="vocab-classifyTerms"></select>
				</p>
				<p class="prop">
					<label for="vocab-leadingCoefficient">Leading Coefficient:</label>
					<select id="vocab-leadingCoefficient"></select>
				</p>
				<p class="prop">
					<label for="vocab-constantTerm">Constant Term:</label>
					<select id="vocab-constantTerm"></select>
				</p>
				<p class="buttons">
					<button id="check">Check</button>
					<button id="next">Next</button>
				</p>
				<p class="score">
					You have successfully completed <span id="scorecount">0</span> polynomials.
				</p>
			</section>
            <section id="learn">
                <h2>Learn the Vocabulary</h2>
                <p>
                    In the tables below, hover over any example to see a tooltip with the 
    ...

CSS

@import url('https://fonts.googleapis.com/css?family=Aref+Ruqaa:400,700');
body{
	background-color: #FFEFD5;
    min-width: 700px;
}
*{
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
}

section h2{
	margin: 0px;
}

#polynomial{
    font-size: 32px;
    padding-left: 180px;
}
.polynomial{
    font-family: 'Aref Ruqaa', serif;
    font-weight: bold;
    color: #006600;
    white-space: nowrap;
}

[title]{
    /*title attriutes become tooltips*/
    cursor: pointer;
}

#controls label{
	display: inline-block;
	width: 180px;
	text-align: right;
	background-repeat: no-repeat;
	background-position: left center;
    padding: 0px 20px;
}
#controls label.correct{
	background-color: #00CC00;
	background-image: url(answer-correct.png);
}
#controls label.incorrect{
	background-color: #CC0000;
	background-image: url(answer-incorrect.png);
}
#controls .buttons{
	padding-left: 180px;
}

table{
    border-collapse: collapse;
    text-align: center;
}
th, td{
    border: 1px solid #000000;
}

JavaScript

var App = {
	classifyDegree: ['Constant','Linear','Quadratic','Cubic','Quartic','Quintic'],
	classifyTerms: ['Monomial','Binomial','Trinomial','Polynomial'],
	numericVals: [-3, -2, -1, 0, 1, 2, 3],
	absVals: [1,2,3], //absolute values of non-zero App.numericVals above
	setControlOptions: function(){
		$('#vocab-leadingCoefficient,#vocab-constantTerm').children().remove();
		for(var i=0; i<App.numericVals.length; i++){
			$('#vocab-leadingCoefficient,#vocab-constantTerm').append('<option>'+App.numericVals[i]+'</option>');
		}
		for(var i=0; i<App.classifyDegree.length; i++){
			$('#vocab-classifyDegree').append('<option>'+App.classifyDegree[i]+'</option>');
		}
		for(var i=0; i<App.classifyTerms.length; i++){
			$('#vocab-classifyTerms').append('<option>'+App.classifyTerms[i]+'</option>');
		}
	},
	randomIntFromTo: function(from,to){
	    return Math.floor(Math.random()*(to-from+1)+from);
	},
    randomFromArray: function(arr){
        return arr[App.randomIntFromTo(0,arr.length-1)];
    },
    shuffleArray: function(a) {
		var o = a.slice(); //slice with no params to copy all
        for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    },
	constructDisplayTerm: function(coefficient, exponent){
        var term = '';
        if(coefficient>0){
            term = '+';
        }
		if(coefficient==1){
			coefficient='';
		}
        if(coefficient==-1){
			coefficient='-';
		}
		if(exponent==1){
			exponent='';
		}
		term += coefficient+'x<sup>'+exponent+'</sup>';
        return term;
	},
	getRandomValues: function(){
		var valOfDegree = App.randomIntFromTo(0,App.classifyDegree.length-1);
		var numOfTerms = App.randomIntFromTo(1,valOfDegree+1);
		var display, lc, con;
		
		//constant
		display = App.randomFromArray(App.absVals);
		if(App.randomIntFromTo(0,1)){
			display = -1*display;
		}
		con = display;
		lc = 0;
		//non-constant
		
		if(valOfDegree){
			lc = con;
			con = 0; //might be changed...