JSFiddle - React, Tailwind, and code Playground

by Gordon Watson

HTML

<div id="page2" data-role="page" data-theme="b">
	<div data-role="header" data-theme="b"><a href="#page" data-role="button" data-icon="home" data-iconpos="left">Home</a>
		<h1>First Set - First 20 Elements</h1>
	</div>
	<div data-role="content" data-theme="b">
    
    <div id="content"><h6>There are 24 cards in this set and they can be randomly loaded four at a time</h6>
    
    <div class="button1" style="height:40px; padding-top:20px;"><button data-icon="refresh"  onclick="loadCards()">Load Next 4 Cards</button></div>
        
        
    
		<div class="content4Column gap">
      <div class="card-container">
	    <div class="card click first" data-direction="left">
	      <div class="front">
	      		<img src="http://new.chemistry-teaching-resources.com/Intermolecular/First20Elements/Q1.png" width="100%" height="100%" alt="">
          </div>
	      <div class="back">
	      		<img src="http://new.chemistry-teaching-resources.com/Intermolecular/First20Elements/A1.png" width="100%" height="100%" alt="">
    </div></div></div>
      
     <form>
    <fieldset data-role="controlgroup" data-theme="b" data-type="horizontal" data-mini="true">
        <legend>Rate your understanding</legend>
        <input type="radio" name="traffic-lights" class="red" id="red" value="on" checked="checked">
        <label for="red"><img src="http://new.chemistry-teaching-resources.com/images/red-light18.png" width="18px" height="18px" ></label>
        <input type="radio" name="traffic-lights" class= "orange" id="orange" value="off">
        <label for="orange"><img src="http://new.chemistry-teaching-resources.com/images/Orange-light18.png" width="18px" height="18px"></label>
        <input type="radio" name="traffic-lights" class="green" id="green" value="other">
        <label for="green"><img src="http://new.chemistry-teaching-resources.com/images/green-light18.png" width="18px" height="18px"></label>
    </fieldset>
</form>






      </div>

   
          
    <div...

CSS

*/
.ui-icon-redLight {
	background-image: url("images/red-light18.png");
}

.ui-icon-orangeLight {
	background-image: url("images/Orange-light18.png");
}

.ui-icon-greenLight {
	background-image: url("images/green-light18.png");
}

	
*/
#buttonHider {
	display:none}


#banner1 {
	display:block;
	width:144px;
	}
	
#banner1 img{
	display:block; 
	margin-left:auto; 
	margin-right:auto;  
	}
	
#banner2 {
	display:block;
	width:144px;
	}
	
#banner2 img{
	display:block; 
	margin-left:auto; 
	margin-right:auto;  
	}
	
a{
	color: #99FFFF;
	text-decoration: none;
	}
	
a:hover{
	text-decoration: none;
	color: #FFCC00;
	}

h1 {
	font-family:'Overlock', cursive;
	font-size:20px;
}

h2 {
	font-family:'Overlock', cursive;
	color:#F3DF05;
	font-size:16px;
	padding-bottom:15px;
}
	
h3{
	font-family:'Overlock', cursive;
	font-size:16px;
	color:#F3DF05;
	margin: 0px 0px 10px 0px;
	font-weight: normal;
	}
	
h4 {
	font-family:'Overlock', cursive;
	font-size:12px;
	color:#ffffff;
	padding-bottom:0px;
	outline:none;
	border:none;
}

h5 {font-family:'Overlock', cursive;
	font-size:42px;
	color:#F3DF05;
	margin: 10px 0px 10px 0px;
	font-weight: normal;}
	
h6{
	font-family:'Overlock', cursive;
	text-align:center;
	font-size:16px;
	margin: 0px 0px 0px 0px;
	font-weight: normal;
	margin-bottom:10px;
	}


p{
	margin: 0px;
	}
	

	
.clearBoth{
	clear: both;
	}

/*

	Standard layout (screen resolutions above 1200px wide)
	____________________________________________________________________________________________________________________________________________________________________
	
*/

	


	
#content{
	margin-top: 20px;
	clear: both;
	}
	
.content1Column{
	margin-top:20px;
	float:left;
	width:100%;}



/* Content */
.content4Column{
	width: 22%;
	margin-top: 20px;
	padding-right:3%;
	float: left;
	}
	
.content4Column img{
		display:block; 
	margin-left:auto; 
	margin-right:auto;  
	}
	
.content4Column.gap{
	padding-right: 3%;
	}
	
	.content4Column.gap img{
		display:block;...

JavaScript

$(document).ready(function () {
    $(".red,.orange,.green").change(function () {
        $('.red_results').text($('.red:checked').length);
        $('.orange_results').text($('.orange:checked').length);
        $('.green_results').text($('.green:checked').length);
    });
});
		




   
  function loadCards() {	
var QAPairs = [];
var QATotal = 24; // total numbers of QA pairs
var QA = QATotal; //number of QA pairs you want. Set to QATotal to include all QA pairs
    while (QAPairs.length != QA) {
        var rand = Math.floor(Math.random() * QATotal);
        if (QAPairs.indexOf(rand) == -1) {
            QAPairs.push(rand);
            //  If you want to show them all at a time
	
		
			for (i = 0; i < QAPairs.length; i++)
			{document.getElementsByClassName("card click first")[i].innerHTML = " "
				document.getElementsByClassName("card click first")[i].innerHTML = document.getElementsByClassName("card click first")[i].innerHTML + '<div class="front">\
            <img src="http://new.chemistry-teaching-resources.com/Intermolecular/First20Elements/Q' + QAPairs[i] + '.png" width="100%" height="100%" alt="" />\
        </div>\
        <div class="back">\
            <img src="http://new.chemistry-teaching-resources.com/Intermolecular/First20Elements/A' + QAPairs[i] + '.png" width="100%" height="100%" alt="" />\
        </div>';} }
		
		
        }
    }