Initializing...
Liveweave
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
build
Tools
expand_more
restart_alt
Load base template
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<html> <head> <link rel="stylesheet" href="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/themes/base/jquery.ui.theme-min.css"> <link rel="stylesheet" href="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/themes/base/jquery.ui.accordion.css"> <link rel="stylesheet" href="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/themes/base/jquery.ui.autocomplete.css"> <link rel="stylesheet" href="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/themes/base/jquery.ui.button.css"> <link rel="stylesheet" href="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/themes/base/jquery.ui.core.css"> <link rel="stylesheet" href="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/themes/base/jquery.ui.datepicker.css"> <link rel="stylesheet" href="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/themes/base/jquery.ui.dialog.css"> <link rel="stylesheet" href="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/themes/base/jquery.ui.progressbar.css"> <link rel="stylesheet" href="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/themes/base/jquery.ui.resizable.css"> <link rel="stylesheet" href="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/themes/base/jquery.ui.selectable.css"> <link rel="stylesheet" href="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/themes/base/jquery.ui.slider.css"> <link rel="stylesheet" href="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/themes/base/jquery.ui.tabs.css"> <link rel="stylesheet" href="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/demos/demos.css"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" > <script src="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/js/jquery-1.8.0.min.js"></script> <script src="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/ui/jquery.ui.core.js"></script> <script src="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/ui/jquery.ui.widget.js"></script> <script src="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/ui/jquery.ui.mouse.js"></script> <script src="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/jquery-ui-1.8.23.custom/development-bundle/ui/jquery.ui.slider.js"></script> <script src="http://testing.cssg.com/WebObjects/Solar.woa/Contents/WebServerResources/highcharts.js"></script> </head> <body id="bodyDiv" onload="setValues()" style="margin:0px;background:transparent;height:100%;" > <div class="pager_header"> <div class="container"> <div class="pull-left" >Student Test</div> <div class=""> <div id="mine2" style="display:none"></div> <ul class="list-inline navbar-right"> <li>Question</li> <li> <div id="dis1" style="display:none"> 1<br> </div> <div id="dis2" style="display:none"> 2<br> </div> </li> <li><div id="tempdis"> </div></li> <li>of </li> <li>2</li> </ul> </div> <div class="clearfix"></div> </div> </div> <div class="container"> <div class="content"> <form id="loginForm" name="myform" action="save1" method="POST"> <div id="myId" style="display:none"></div> </form> <form id="loginForm" name="cssgFrom" action="save" method="POST"> <div id="exitId" style="display:none"></div> </form> <div class="row"> <div class="col-md-6"> <h4 class="subhead">Question</h4> <div class="quaction_arae no-select"> <div id="scrollbar4"> <div class="viewport"> <div class="overview"> <div id="tempque"></div> <div id="mine" style="display:none"></div> <div id="que1" style="display:none"> <b>A rectangular prism has dimensions 5 null; 3 null; 9. One of the dimensions is multiplied by a scale factor of 4. Give an expression to find the volume of the new prism.</b> </div> <div id="que2" style="display:none"> <strong>Students in Mr. Webbernull;s class identified their favorite flavor of ice cream. The chart below shows the data that was collected.<br /><br /> </strong> <table border="1" style="width:30%"> <tr> <td>Vanilla</td> <td>5</td> </tr> <tr> <td>Choclate</td> <td>8</td> </tr> <tr> <td>Strawberry</td> <td>4</td> </tr> </table> </div> </div> </div> </div> </div> </div> <div class="col-md-6"> <h4 class="subhead">Answer</h4> <div class="quaction_arae no-select" style="overflow-y:scroll"> <div id="scrollbar3"> <div class="viewport"> <div class="overview"> <div id="mine1" style="display:none"></div> <div id="tempopt"></div> <div id="opt1" style="display:none"> <input type="hidden" name="26713hidden" value="hidden"/> <table border="0" > <tr><td style="padding:5px; vertical-align: top;"><span style="font-weight: bold;margin-top:2px ;">A</span></td> <td style="padding:7px 5px; vertical-align: top;"><input type="radio" id="2671384014" name="26713" onclick="updateDom(this.name)" value="84014" style="margin-top:0px;"/></td> <td style="padding:5px; vertical-align: top;"> <div id="84014"> Requires a candidate to take a second and sometimes even a third job </div></td> </tr></table> <table border="0" > <tr><td style="padding:5px; vertical-align: top;"><span style="font-weight: bold;margin-top:2px ;">B</span></td> <td style="padding:7px 5px; vertical-align: top;"><input type="radio" id="2671384015" name="26713" onclick="updateDom(this.name)" value="84015" style="margin-top:0px;"/></td> <td style="padding:5px; vertical-align: top;"> <div id="84015"> Requires a candidate to get help from family members </div></td> </tr></table> <table border="0" > <tr><td style="padding:5px; vertical-align: top;"><span style="font-weight: bold;margin-top:2px ;">C</span></td> <td style="padding:7px 5px; vertical-align: top;"><input type="radio" id="2671384017" name="26713" onclick="updateDom(this.name)" value="84017" style="margin-top:0px;"/></td> <td style="padding:5px; vertical-align: top;"> <div id="84017"> Requires a candidate to work full-time on their election </div></td> </tr></table> <table border="0" > <tr><td style="padding:5px; vertical-align: top;"><span style="font-weight: bold;margin-top:2px ;">D</span></td> <td style="padding:7px 5px; vertical-align: top;"><input type="radio" id="2671384016" name="26713" onclick="updateDom(this.name)" value="84016" style="margin-top:0px;"/></td> <td style="padding:5px; vertical-align: top;"> <div id="84016"> Gives issue-oriented special interest groups increased influence </div></td> </tr></table> </div> <br> <div id="opt2" style="display:none"> <div class="right"> <p class="text-muted" style="color:#000;font-weight:bold;"> Click on a location above each bar to show the bar height for each flavor.</p> </div> <div id="container" style="position:absolute; left:50px; top:84px; height: 330px; margin: 0 auto;"></div> <div id="barDiv" style="width:500px; height:200px; background:transparent; position:absolute; left:140px; top:325px; z-index:200; overflow:visible;"></div> </div> <br> </div> </div> </div> </div> </div> </div> <br> </body> <div class="pull-right"> <div class="but_area btn_right"> <button id="prev" class="btn btn-default" type="button" onclick="myFunction(this.id)" value="0" >Previous</button> <button id="next" class="btn btn-default" type="button" onclick="myFunction(this.id)" value="1" >Next</button> <button class="btn btn-default" type="button" onclick="exitButtonAjaxReq()" >Exit</button> </div> </div> </div> </div> </html>
.names{ transform: rotate(-90deg); text-align:right; color:#6D869F; height: 100px; margin-left: 50px; }
// Write JavaScript here $(document).ready(function(){ var imgDiv=document.getElementById("divImg1"); if(imgDiv){ imgDiv.style.display="block"; } document.getElementById("mine").style.display='block'; document.getElementById("mine1").style.display='block'; document.getElementById("mine2").style.display='block'; document.getElementById("tempque").innerHTML=document.getElementById("que1").innerHTML; document.getElementById("tempopt").innerHTML=document.getElementById("opt1").innerHTML; document.getElementById("tempdis").innerHTML=document.getElementById("dis1").innerHTML; }); function barChart(graphTitleData,xyTitleData,barLablesData,yMinMaxData,yIntervalData,yTickIntervalData,valuesData){ values = []; var xyTitles = xyTitleData.split(","); xTitle = xyTitles[0]; yTitle = xyTitles[1]; var yMinMax = yMinMaxData.split("-"); yMin = parseInt(yMinMax[0], 10); yMax = parseInt(yMinMax[1], 10); names = barLablesData.split(","); if(valuesData != null && valuesData != ""){ values = valuesData.split(","); } maxLimit = yMax; startPoint = yMin; yInterval = parseFloat(yIntervalData); if(yTickIntervalData.length > 0) yTickInterval = parseInt(yTickIntervalData, 10); minStep = yInterval; var value = 0; for( i=1;i<=names.length;i++){ if(i==1){ if(values.length >= 1){ value = parseFloat(values[0], 10); } nam = names[0]; addbar1(nam,value); jQuery( "#container" ).width("200px"); } else if(i==2){ if(values.length >= 2) value = parseFloat(values[1], 10); nam = names[1]; addbar2(nam,value); jQuery( "#container" ).width("240px"); } else if(i==3){ if(values.length >= 3) value = parseFloat(values[2], 10); nam = names[2]; addbar3(nam,value); jQuery( "#container" ).width("280px"); } else if(i==4){ if(values.length >= 4) value = parseFloat(values[3], 10); nam = names[3]; addbar4(nam,value); jQuery( "#container" ).width("320px"); } else if(i==5){ if(values.length >= 5) value = parseFloat(values[4], 10); nam = names[4]; addbar5(nam,value); jQuery( "#container" ).width("360px"); } else if(i==6){ if(values.length >= 6){ value = parseFloat(values[5], 10); } nam = names[5]; addbar6(nam,value); jQuery( "#container" ).width("400px"); } } createChart(graphTitleData,xyTitleData,barLablesData,yMinMaxData,yIntervalData,yTickIntervalData,valuesData); } var ua = window.navigator.userAgent; var msie = ua.indexOf('MSIE 9') > 0; var ie11 = ua.indexOf('Trident/7') > 0; function addbar1(name,val){ jQuery("#barDiv").append("<div id='bar' style='width:40px; height:220px; height: 220px; margin: -220px 0px 0px 10px;'><div class='demo'><p><input type='text' id='amount' class='amount' style='visibility:hidden;width:30px; border:0; color:#f6931f; font-weight:bold;' readonly='readonly'/></p><div id='slider-vertical' style='height:200px; top:5px; background:#12ADFF'></div><br><br><br><div class='names' id='Name1'></div></div></div>"); jQuery( "#Name1" ).html(name); jQuery( "#slider-vertical" ).slider({ orientation: "vertical", range: "max", min: startPoint, max: maxLimit, value: val, step: minStep, slide: function( event, ui ) { jQuery( "#amount" ).val( ui.value ); setGraphPoints(); } }); jQuery( "#amount" ).val( jQuery( "#slider-vertical" ).slider( "value" ) ); } function addbar2(name,val){ jQuery("#barDiv").append("<div id='bar2' style='width:40px; height:220px; height: 220px; margin: -220px 0px 0px 50px;'><div class='demo'><p><input type='text' id='amount2' class='amount' style='visibility:hidden;width:30px; border:0; color:#f6931f; font-weight:bold;' readonly='readonly'/></p><div id='slider-vertical2' style='height:200px; top:5px; background:#009900'></div><br><br><br><div class='names' id='Name2'></div></div></div>"); jQuery( "#Name2" ).html(name); jQuery( "#slider-vertical2" ).slider({ orientation: "vertical", range: "max", min: startPoint, max: maxLimit, value: val, step: minStep, slide: function( event, ui ) { jQuery( "#amount2" ).val( ui.value ); setGraphPoints(); } }); jQuery( "#amount2" ).val( jQuery( "#slider-vertical2" ).slider( "value" ) ); } function addbar3(name,val){ jQuery("#barDiv").append("<div id='bar3' style='width:40px; height:220px; height: 220px; margin: -220px 0px 0px 90px;'><div class='demo'><p><input type='text' id='amount3' class='amount' style='visibility:hidden;width:30px; border:0; color:#f6931f; font-weight:bold;' readonly='readonly'/></p><div id='slider-vertical3' style='height:200px; top:5px; background:#F0BE1D'></div><br><br><br><div class='names' id='Name3'></div></div></div>"); jQuery( "#Name3" ).html(name); jQuery( "#slider-vertical3" ).slider({ orientation: "vertical", range: "max", min: startPoint, max: maxLimit, value: val, step: minStep, slide: function( event, ui ) { jQuery( "#amount3" ).val( ui.value ); setGraphPoints(); } }); jQuery( "#amount3" ).val( jQuery( "#slider-vertical3" ).slider( "value" ) ); } function addbar4(name,val){ jQuery("#barDiv").append("<div id='bar4' style='width:40px; height:220px; height: 220px; margin: -220px 0px 0px 130px;'><div class='demo'><p><input type='text' id='amount4' class='amount' style='visibility:hidden;width:30px; border:0; color:#f6931f; font-weight:bold;' readonly='readonly'/></p><div id='slider-vertical4' style='height:200px; top:5px; background:#F07241'></div><br><br><br><div class='names' id='Name4'></div></div></div>"); jQuery( "#Name4" ).html(name); jQuery( "#slider-vertical4" ).slider({ orientation: "vertical", range: "max", min: startPoint, max: maxLimit, value: val, step: minStep, slide: function( event, ui ) { jQuery( "#amount4" ).val( ui.value ); setGraphPoints(); } }); jQuery( "#amount4" ).val( jQuery( "#slider-vertical4" ).slider( "value" ) ); } function addbar5(name,val){ jQuery("#barDiv").append("<div id='bar5' style='width:40px; height:220px; height: 220px; margin: -220px 0px 0px 170px;'><div class='demo'><p><input type='text' id='amount5' class='amount' style='visibility:hidden;width:30px; border:0; color:#f6931f; font-weight:bold;' readonly='readonly'/></p><div id='slider-vertical5' style='height:200px; top:5px; background:#CC11FF'></div><br><br><br><div class='names' id='Name5'></div></div></div>"); jQuery( "#Name5" ).html(name); jQuery( "#slider-vertical5" ).slider({ orientation: "vertical", range: "max", min: startPoint, max: maxLimit, value: val, step: minStep, slide: function( event, ui ) { jQuery( "#amount5" ).val( ui.value ); setGraphPoints(); } }); jQuery( "#amount5" ).val( jQuery( "#slider-vertical5" ).slider( "value" ) ); } function addbar6(name,val){ jQuery("#barDiv").append("<div id='bar6' style='width:40px; height:220px; height: 220px; margin: -220px 0px 0px 210px;'><div class='demo'><p><input type='text' id='amount6' class='amount' style='visibility:hidden;width:30px; border:0; color:#f6931f; font-weight:bold;' readonly='readonly'/></p><div id='slider-vertical6' style='height:200px; top:5px; background:#FF0000'></div><br><br><br><div class='names' id='Name6'></div></div></div>"); jQuery( "#Name6" ).html(name); jQuery( "#slider-vertical6" ).slider({ orientation: "vertical", range: "max", min: startPoint, max: maxLimit, value: val, step: minStep, slide: function( event, ui ) { jQuery( "#amount6" ).val( ui.value ); setGraphPoints(); } }); jQuery( "#amount6" ).val( jQuery( "#slider-vertical6" ).slider( "value" ) ); } function createChart(graphTitleData,xyTitleData,barLablesData,yMinMaxData,yIntervalData,yTickIntervalData,valuesData){ var chart; chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: 'scatter', margin: [70, 50, 60, 80] }, title: { text: graphTitleData, style: { font: 'normal 10pt Verdana, sans-serif !important' } }, xAxis: { title: { text: xTitle, margin:12, style: { font: 'normal 10pt Verdana, sans-serif !important' } } }, yAxis: { title: { text: yTitle, style: { font: 'normal 10pt Verdana, sans-serif !important' } }, min: startPoint, tickInterval: yTickInterval, max: maxLimit, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name:name }] }); } function setGraphPoints(){ var studentAns; var bar1Ans,bar2Ans,bar3Ans,bar4Ans,bar5Ans,bar6Ans; var ansList = []; if(document.getElementById("amount")) ansList.push(document.getElementById("amount").value); if(document.getElementById("amount2")) ansList.push(document.getElementById("amount2").value); if(document.getElementById("amount3")) ansList.push(document.getElementById("amount3").value); if(document.getElementById("amount4")) ansList.push(document.getElementById("amount4").value); if(document.getElementById("amount5")) ansList.push(document.getElementById("amount5").value); if(document.getElementById("amount6")) ansList.push(document.getElementById("amount6").value); studentAns = ansList.join(","); //document.getElementById("selectedGraphPoints").value = studentAns; } function changeDivContent(){ var nextVal=document.getElementById("next").value; document.getElementById("opt"+(nextVal)).innerHTML=document.getElementById("tempopt").innerHTML; } function exitButtonAjaxReq(){ document.getElementById("exitId").innerHTML=document.getElementById("tempopt").innerHTML; document.cssgFrom.submit() ; } function myFunction(id){ var val=document.getElementById(id).value; var prevTemp=val; var nextTemp=val; var lastElement=val; var storeDiv=val; if(id=='prev'){ } var finalElement=document.getElementById("que"+(++lastElement)); document.getElementById("myId").innerHTML=document.getElementById("tempopt").innerHTML; if(id=='prev'){ changeDivContent(); document.getElementById("prev").value=--prevTemp; document.getElementById("next").value=val; ++storeDiv; } else { document.getElementById("prev").value=val document.getElementById("next").value=++nextTemp; } if(id=='prev'){ var newImg=document.getElementById("divImg"+(prevTemp)); var oldImg=document.getElementById("divImg"+(val)); if(val==1){ ++prevTemp; } if(newImg){ newImg.style.display="block"; } if(oldImg){ oldImg.style.display="none"; } if(prevTemp!=1){ document.getElementById("que"+(storeDiv)).innerHTML=document.getElementById("tempque").innerHTML; document.getElementById("opt"+(storeDiv)).innerHTML=document.getElementById("tempopt").innerHTML; document.getElementById("dis"+(storeDiv)).innerHTML=document.getElementById("tempdis").innerHTML; } document.getElementById("tempque").innerHTML=document.getElementById("que"+val).innerHTML; document.getElementById("tempopt").innerHTML=document.getElementById("opt"+val).innerHTML; document.getElementById("tempdis").innerHTML=document.getElementById("dis"+val).innerHTML; } else { var newImg=document.getElementById("divImg"+(nextTemp)); var oldImg=document.getElementById("divImg"+(val)); if(newImg){ newImg.style.display="block"; } if(oldImg){ oldImg.style.display="none"; } document.getElementById("que"+(val)).innerHTML=document.getElementById("tempque").innerHTML; document.getElementById("opt"+(val)).innerHTML=document.getElementById("tempopt").innerHTML; document.getElementById("dis"+(val)).innerHTML=document.getElementById("tempdis").innerHTML; document.getElementById("tempque").innerHTML=document.getElementById("que"+nextTemp).innerHTML; document.getElementById("tempopt").innerHTML=document.getElementById("opt"+nextTemp).innerHTML; document.getElementById("tempdis").innerHTML=document.getElementById("dis"+nextTemp).innerHTML; } $.post($('form[name=myform]').attr('action'), $('form[name=myform]').serialize(), function(res){ }); } function enableDiv(size){ for(var i=1; i <size; i++) { //document.getElementById("que"+i+"").innerHTML=document.getElementById("mine").innerHTML; } return false; } function updateDom(name){ var radioNames = document.getElementsByName(name); for(var i=0; i < radioNames.length; i++) { if (radioNames[i].checked) { radioNames[i].setAttribute("checked","checked"); } else { radioNames[i].removeAttribute("checked"); } } //changeDivContent(); } function updateText(id){ var val=document.getElementById(id).value; document.getElementById(id).setAttribute("value",val); } function setValues() { barChart("Favorite Ice Cream in Mr. Webber?s Class","Flavors, Number of People","Strawberry, Chocolate, Vanilla","0-8","0-8","1","1",null); }