|
Answer» <html><head> <meta charset="utf-8"> <title>Wheel of Fortune Bingo</title> <style type="text/css"> text{ font-family:Helvetica, Arial, sans-serif; font-size:11px; pointer-events:none; } #chart{ position:absolute; width:500px; height:500px; top:0; left:0; } #question{ position: absolute; width:400px; height:500px; top:0; left:520px; } #question h1{ font-size: 50px; font-weight: bold; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; position: absolute; padding: 0; margin: 0; top:50%; -webkit-transform:translate(0,-50%); transform:translate(0,-50%); } </style> </head><body> <div id="chart"></div> <div id="question"></div> <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> var padding = {top:20, right:40, bottom:0, left:0}, w = 500 - padding.left - padding.right, h = 500 - padding.top - padding.bottom, r = Math.min(w, h)/2, rotation = 0, oldrotation = 0, picked = 100000, oldpick = [], color = d3.scale.category20();//category20c() //randomNumbers = getRandomNumbers(); //http://osric.com/bingo-card-generator/?title=HTML+and+CSS+BINGO!&words=padding%2Cfont-family%2Ccolor%2Cfont-weight%2Cfont-size%2Cbackground-color%2Cnesting%2Cbottom%2Csans-serif%2Cperiod%2Cpound+sign%2C%EF%B9%A4body%EF%B9%A5%2C%EF%B9%A4ul%EF%B9%A5%2C%EF%B9%A4h1%EF%B9%A5%2Cmargin%2C%3C++%3E%2C{+}%2C%EF%B9%A4p%EF%B9%A5%2C%EF%B9%A4!DOCTYPE+html%EF%B9%A5%2C%EF%B9%A4head%EF%B9%A5%2Ccolon%2C%EF%B9%A4style%EF%B9%A5%2C.html%2CHTML%2CCSS%2CJavaScript%2Cborder&freespace=true&freespaceValue=Web+Design+Master&freespaceRandom=false&width=5&height=5&number=35#results var data = [ {"label":"Dell LAPTOP", "value":1, "question":"What CSS property is used for specifying the area between the content and its border?"}, // padding {"label":"IMAC PRO", "value":1, "question":"What CSS property is used for changing the font?"}, //font-family {"label":"SUZUKI", "value":1, "question":"What CSS property is used for changing the color of text?"}, //color {"label":"HONDA", "value":1, "question":"What CSS property is used for changing the boldness of text?"}, //font-weight {"label":"FERRARI", "value":1, "question":"What CSS property is used for changing the size of text?"}, //font-size {"label":"APARTMENT", "value":1, "question":"What CSS property is used for changing the background color of a box?"}, //background-color {"label":"IPAD PRO", "value":1, "question":"Which word is used for specifying an HTML tag that is inside another tag?"}, //nesting {"label":"LAND", "value":1, "question":"Which side of the box is the third number in: margin:1px 1px 1px 1px; ?"}, //bottom {"label":"MOTOROLLA", "value":1, "question":"What are the fonts that don\'t have serifs at the ends of letters called?"}, //sans-serif {"label":"BMW", "value":1, "question":"With CSS selectors, what character prefix should one use to specify a class?"}, //period {"label":"RANGE ROVER", "value":1, "question":"With CSS selectors, what character prefix should one use to specify an ID?"}, //pound sign {"label":"FREE VISA", "value":1, "question":"In an HTML document, which tag holds all of the content people see?"}, //<body> {"label":"HOTEL TICKET", "value":1, "question":"In an HTML document, which tag indicates an unordered list?"}, // {"label":"PLANE", "value":1, "question":"In an HTML document, which tag indicates the most important heading of your document?"}, // {"label":"HOME", "value":1, "question":"What CSS property is used for specifying the area outside a box?"}, //margin {"label":"MAC BOOK", "value":1, "question":"What type of bracket is used for HTML tags?"}, //< > {"label":"SAMSUNG GALAXY 7", "value":1, "question":"What type of bracket is used for CSS rules?"}, // { } {"label":"NOTE BOOK", "value":1, "question":"Which HTML tag is used for specifying a paragraph?"}, // {"label":"20,0000,0000$", "value":1, "question":"What should always be the very first line of code in your HTML?"}, // {"label":"HOTEL TICKET", "value":1, "question":"What HTML tag holds all of the metadata tags for your page?"}, //<head> {"label":"SAMSUNG TV", "value":1, "question":"In CSS, what character separates a property from a value?"}, // colon {"label":"LG HD TV", "value":1, "question":"What HTML tag holds all of your CSS code?"}, // <style> {"label":"FREE FURNITURE", "value":1, "question":"What file extension should you use for your web pages?"}, // .html {"label":"FREE ADMISSION MIT", "value":1, "question":"Which coding language is used for marking up content and structure on a web page?"}, // HTML {"label":"OPPO CAMERA PHONE", "value":1, "question":"Which coding language is used for specifying the design of a web page?"}, // CSS {"label":"SAMSUNG NOTE5", "value":1, "question":"Which coding language is used for adding functionality to a web page?"}, // JavaScript {"label":"HP DESKTOP", "value":1, "question":"What CSS property is used for making the edges of a box visible?"}, // border {"label":"15,000,000$", "value":1, "question":"What character symbol is used at the end of each CSS statement?"},//semi-colon {"label":"BUGGATI", "value":1, "question":"By default, how wide is a <div> box?"}, //100% {"label":" GOOGLE JOB", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"} //comma ]; var svg = d3.select(\'#chart\') .append("svg") .data([data]) .attr("width", w + padding.left + padding.right) .attr("height", h + padding.top + padding.bottom); var container = svg.append("g") .attr("class", "chartholder") .attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")"); var vis = container .append("g"); var pie = d3.layout.pie().sort(null).value(function(d){return 1;}); // declare an arc generator function var arc = d3.svg.arc().outerRadius(r); // select paths, use arc generator to draw var arcs = vis.selectAll("g.slice") .data(pie) .enter() .append("g") .attr("class", "slice"); arcs.append("path") .attr("fill", function(d, i){ return color(i); }) .attr("d", function (d) { return arc(d); }); // add the text arcs.append("text").attr("transform", function(d){ d.innerRadius = 0; d.outerRadius = r; d.angle = (d.startAngle + d.endAngle)/2; return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius -10) +")"; }) .attr("text-anchor", "end") .text( function(d, i) { return data[i].label; }); container.on("click", spin); function spin(d){ container.on("click", null); //all slices have been seen, all done console.log("OldPick: " + oldpick.length, "Data length: " + data.length); if(oldpick.length == data.length){ console.log("done"); container.on("click", null); return; } var ps = 360/data.length, pieslice = Math.round(1440/data.length), rng = Math.floor((Math.random() * 1440) + 360); rotation = (Math.round(rng / ps) * ps); picked = Math.round(data.length - (rotation % 360)/ps); picked = picked >= data.length ? (picked % data.length) : picked; if(oldpick.indexOf(picked) !== -1){ d3.select(this).call(spin); return; } else { oldpick.push(picked); } rotation += 90 - Math.round(ps/2); vis.transition() .duration(3000) .attrTween("transform", rotTween) .each("end", function(){ //mark question as seen d3.select(".slice:nth-child(" + (picked + 1) + ") path") .attr("fill", "#111"); //populate question d3.select("#question h1") .text(data[picked].question); oldrotation = rotation; container.on("click", spin); }); } //make arrow svg.append("g") .attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h/2)+padding.top) + ")") .append("path") .attr("d", "M-" + (r*.15) + ",0L0," + (r*.05) + "L0,-" + (r*.05) + "Z") .style({"fill":"black"}); //draw spin circle container.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 60) .style({"fill":"white","cursor":"pointer"}); //spin text container.append("text") .attr("x", 0) .attr("y", 15) .attr("text-anchor", "middle") .text("SPIN") .style({"font-weight":"bold", "font-size":"30px"}); function rotTween(to) { var i = d3.interpolate(oldrotation % 360, rotation); return function(t) { return "rotate(" + i(t) + ")"; }; } function getRandomNumbers(){ var array = new Uint16Array(1000); var scale = d3.scale.linear().range([360, 1440]).domain([0, 100000]); if(window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function"){ window.crypto.getRandomValues(array); console.log("works"); } else { //no support for crypto, get crappy random numbers for(var i=0; i < 1000; i++){ array[i] = Math.floor(Math.random() * 100000) + 1; } } return array; } </script></body></html><br><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Clock 2</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script></head><body class="light-theme"> <div class="wrapper"> <div class="clock-container"> <div class="clock-body"> <div class="clock-markings"> </div> <div class="clock-labels"> <div class="clock-label-row big"> <div class="top-label">12</div> <div class="bottom-label">6</div> </div> <div class="clock-label-row"> <div class="top-label">|</div> <div class="bottom-label">|</div> </div> <div class="clock-label-row"> <div class="top-label">|</div> <div class="bottom-label">|</div> </div> <div class="clock-label-row big"> <div class="top-label">3</div> <div class="bottom-label">9</div> </div> <div class="clock-label-row"> <div class="top-label">|</div> <div class="bottom-label">|</div> </div> <div class="clock-label-row"> <div class="top-label">|</div> <div class="bottom-label">|</div> </div> </div> <div class="clock-hands"> <div class="clock-hour-hand"></div> <div class="clock-minute-hand"></div> <div class="clock-second-hand"></div> </div> <div class="clock-name-label"> <div class="name">! Quartz</div> </div> </div> </div> <div class="theme-switch-container"> <div class="theme-switch" id="theme-switch" data-state="light-mode"> <div class="slide-group"> <div class="dark-mode label">Dark</div> <div class="switch-btn" onclick="switchTheme()"> <div class="moon-icon icon"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M12 24C5.367 24 0 18.633 0 12 0 5.488 5.152.285 11.477.012a.741.741 0 01.742.515.747.747 0 01-.293.856A8.25 8.25 0 0016.5 16.5a8.178 8.178 0 005.93-2.516.752.752 0 01.898-.136c.293.16.45.496.371.824A12.006 12.006 0 0112 24zM9.098 1.902A10.476 10.476 0 001.5 12c0 5.79 4.71 10.5 10.5 10.5 4.086 0 7.676-2.3 9.41-5.82A9.663 9.663 0 0116.5 18c-5.375 0-9.75-4.375-9.75-9.75a9.73 9.73 0 012.348-6.348zm0 0"/><path d="M19.5 9a.75.75 0 01-.75-.75c0-1.652-1.348-3-3-3a.75.75 0 010-1.5c1.652 0 3-1.348 3-3a.75.75 0 011.5 0c0 1.652 1.348 3 3 3a.75.75 0 010 1.5c-1.652 0-3 1.348-3 3a.75.75 0 01-.75.75zm-1.266-4.5c.5.332.934.766 1.266 1.266A4.54 4.54 0 0120.766 4.5 4.54 4.54 0 0119.5 3.234 4.54 4.54 0 0118.234 4.5zm0 0M14.25 14.672a.75.75 0 01-.75-.75c0-1.035-.84-1.875-1.875-1.875a.75.75 0 010-1.5c1.035 0 1.875-.84 1.875-1.875a.75.75 0 011.5 0c0 1.035.84 1.875 1.875 1.875a.75.75 0 010 1.5c-1.035 0-1.875.84-1.875 1.875a.75.75 0 01-.75.75zm-.508-3.375c.188.148.36.32.508.508.148-.188.32-.36.508-.508a3.122 3.122 0 01-.508-.508c-.148.188-.32.36-.508.508zm0 0"/></svg> </div> <div class="sun-icon icon"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M16.254 7.746A6.052 6.052 0 0012 5.97a5.923 5.923 0 00-4.254 1.777A6.052 6.052 0 005.97 12c0 1.652.699 3.176 1.777 4.254A6.052 6.052 0 0012 18.03a5.923 5.923 0 004.254-1.777A6.052 6.052 0 0018.03 12a5.923 5.923 0 00-1.777-4.254zm-1.145 7.363A4.374 4.374 0 0112 16.383a4.374 4.374 0 01-3.11-1.274A4.374 4.374 0 017.618 12c0-1.207.477-2.316 1.274-3.11A4.374 4.374 0 0112 7.618c1.207 0 2.316.477 3.11 1.274A4.374 4.374 0 0116.382 12a4.374 4.374 0 01-1.274 3.11zm0 0M23.176 11.176H20.73a.837.837 0 00-.824.824c0 .445.38.824.824.824h2.446A.84.84 0 0024 12a.84.84 0 00-.824-.824zm0 0M12 19.906a.837.837 0 00-.824.824v2.446A.84.84 0 0012 24a.84.84 0 00.824-.824V20.73a.837.837 0 00-.824-.824zm0 0M20.477 19.332l-1.747-1.746c-.285-.316-.824-.316-1.144 0a.809.809 0 000 1.144l1.746 1.747a.809.809 0 101.145-1.145zm0 0M12 0a.84.84 0 00-.824.824V3.27c0 .445.379.824.824.824a.837.837 0 00.824-.824V.824A.84.84 0 0012 0zm0 0M20.508 3.523a.809.809 0 00-1.145 0L17.617 5.27a.809.809 0 000 1.144c.29.316.828.316 1.145 0l1.746-1.746a.809.809 0 000-1.145zm0 0M3.27 11.176H.824A.84.84 0 000 12c0 .445.348.824.824.824H3.27A.837.837 0 004.094 12a.837.837 0 00-.824-.824zm0 0M6.383 17.586c-.29-.316-.828-.316-1.145 0l-1.746 1.746a.809.809 0 101.145 1.145l1.746-1.747a.809.809 0 000-1.144zm0 0M6.383 5.27L4.637 3.523a.809.809 0 10-1.145 1.145l1.746 1.746A.809.809 0 106.383 5.27zm0 0"/></svg> </div> </div> <div class="light-mode label">Light</div> </div> </div> </div> </div></body></html><br><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calendar App</title></head><body class="light-theme"> <div class="wrapper"> <div class="center"> <div class="card"> <div class="calendar" id="calendarView"> <div class="top-controls"> <div class="month-control"> <div class="custom-select-input"> <div class="left-btn" onclick="prevMonth()"></div> <div class="selected-option"> <div class="option-list"> <div class="option">JANUARY</div> <div class="option">FEBRUARY</div> <div class="option">MARCH</div> <div class="option">APRIL</div> <div class="option">MAY</div> <div class="option">JUNE</div> <div class="option">JULY</div> <div class="option">AUGUST</div> <div class="option">SEPTEMBER</div> <div class="option">OCTOBER</div> <div class="option">NOVEMBER</div> <div class="option">DECEMBER</div> </div> </div> <div class="right-btn" onclick="nextMonth()"></div> </div> </div> <div class="year-control"> <div class="custom-select-input"> <div class="left-btn" onclick="prevYear()"></div> <div class="selected-option"> <div class="option-list"> </div> </div> <div class="right-btn" onclick="nextYear()"></div> </div> </div> </div> <div class="week-name-group"> <div class="week-name">MON</div> <div class="week-name">TUE</div> <div class="week-name">WED</div> <div class="week-name">THU</div> <div class="week-name">FRI</div> <div class="week-name">SAT</div> <div class="week-name">SUN</div> <div class="bottom-marker"></div> </div> <div class="date-panel"> <div class="date-row"> <div class="date">1</div> <div class="date">2</div> <div class="date">3</div> <div class="date">4</div> <div class="date">5</div> <div class="date">6</div> <div class="date">7</div> </div> <div class="date-row"> <div class="date">2</div> <div class="date">3</div> <div class="date">4</div> <div class="date">5</div> <div class="date">6</div> <div class="date">7</div> <div class="date">8</div> <div class="date">9</div> <div class="date">10</div> <div class="date">11</div> <div class="date">12</div> <div class="date">13</div> <div class="date">14</div> </div> <div class="date-row"> <div class="date">9</div> <div class="date">10</div> <div class="date">11</div> <div class="date">12</div> <div class="date">13</div> <div class="date">14</div> <div class="date">15</div> <div class="date">16</div> <div class="date">17</div> <div class="date">18</div> <div class="date">19</div> <div class="date">20</div> <div class="date">21</div> </div> <div class="date-row"> <div class="date">16</div> <div class="date">17</div> <div class="date">18</div> <div class="date">19</div> <div class="date">20</div> <div class="date">21</div> <div class="date">22</div> <div class="date">23</div> <div class="date">24</div> <div class="date">25</div> <div class="date">26</div> <div class="date">27</div> <div class="date">28</div> </div> <div class="date-row"> <div class="date">23</div> <div class="date">24</div> <div class="date">25</div> <div class="date">26</div> <div class="date">27</div> <div class="date">28</div> <div class="date d29">29</div> <div class="date d30">30</div> <div class="date d31">31</div> </div> <div class="date-row"> <div class="date d30">30</div> <div class="date d31">31</div> </div> </div> </div> </div> </div> </div></body></html><br>Am I blinking?<br>what??
|
