Here is the puzzle, I address with this block:
Can you guess a birthday (just 1 out of 366 days, i.e. no year) under the following conditions:
(unshuffled version)
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <head> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| rect.solution { | |
| fill-opacity: 0.2; | |
| stroke: black; | |
| } | |
| text.answer, text.solution{ | |
| text-anchor: middle; | |
| } | |
| text.mydays{ | |
| font-size: 16px; | |
| text-anchor: middle; | |
| } | |
| div.center { | |
| text-align: center; | |
| } | |
| svg { | |
| margin-left: auto; | |
| margin-right: auto; | |
| display: block; | |
| } | |
| div, h1, h5, h2, text { | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .background { | |
| fill: #eee; | |
| } | |
| line { | |
| stroke: #fff; | |
| } | |
| .day { | |
| fill: #fff; | |
| stroke: #ccc; | |
| } | |
| .month { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 4px; | |
| } | |
| .year-title { | |
| font-size: 1.5em; | |
| } | |
| .color { | |
| fill: green; | |
| fill-opacity: 0.4; | |
| } | |
| .nocolor { | |
| fill: #fff | |
| } | |
| body { | |
| font: 1.1em sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var maxNumber = 367; | |
| var currentCard = 0; | |
| var solution = 0; | |
| var width = 1000, | |
| height = 900, | |
| z = 20, | |
| x = width / z, | |
| y = height / z; | |
| var solutionDays = d3.timeDays(new Date(2016, 0, 1), new Date(2017, 0, 1)); | |
| var solutionFormat = d3.timeFormat("%B %e"); | |
| var myDaysFormat = d3.timeFormat("%e"); | |
| var shuffleSolution = false; | |
| var shuffleMap, unShuffleMap; | |
| console.log(getMagicNumbers(maxNumber)); | |
| var myDiv = d3.select("body").append("div").attr("class", "center"); | |
| myDiv.append("h1").attr("class", "task").text("I will try to guess your birthday after asking 9 yes/no questions!"); | |
| myDiv.append("h5").attr("class", "task").text("Don't say your birthday out loud!"); | |
| myDiv.append("h3").attr("class", "task").text("Is your birthday marked on the following calendar?"); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| var myCards = getMagicNumbers(maxNumber); | |
| getShuffleMap(maxNumber); | |
| drawCards(svg); | |
| var answers = svg.selectAll("g.answer") | |
| .data(["yes","no"]) | |
| .enter() | |
| .append("g") | |
| .attr("class", "answer") | |
| .attr("transform", function (d, i) { return "translate(" + (380 + i * 200) + ", 60)";});; | |
| answers.append("text") | |
| .text(function (d) { return d;}) | |
| .attr("y", "0.3em") | |
| .attr("class", "answer") | |
| .style("font-size", "24px"); | |
| answers.append("circle") | |
| .attr("r", 50) | |
| .style("stroke", function(d, i) {return (i === 0) ? "green" : "red"}) | |
| .style("fill", "lightgrey") | |
| .style("fill-opacity", 0.4) | |
| .on("mouseover", function(d, i) { | |
| var col = (i === 0) ? "green" : "red"; | |
| d3.select(this).style("fill", col).style("stroke-width", 3);}) | |
| .on("mouseout", function() { | |
| d3.select(this).style("fill", "lightgrey").style("stroke-width", 1);}) | |
| .on("click", nextCard); | |
| d3.select(".card.c" + currentCard) | |
| .transition() | |
| .attr("transform", "translate(170, 110) scale(0.8)"); | |
| function drawCards(_selection) { | |
| // calendar implementation from http://kathyz.github.io/d3-calendar/ | |
| var width = 960, | |
| height = 750, | |
| cellSize = 25; // cell size | |
| var no_months_in_a_row = Math.floor(width / (cellSize * 7 + 50)); | |
| var shift_up = cellSize * 3; | |
| var day = d3.timeFormat("%w"), // day of the week | |
| day_of_month = d3.timeFormat("%e") // day of the month | |
| day_of_year = d3.timeFormat("%j") | |
| week = d3.timeFormat("%U"), // week number of the year | |
| month = d3.timeFormat("%m"), // month number | |
| year = d3.timeFormat("%Y"), | |
| percent = d3.format(".1%"), | |
| format = d3.timeFormat("%Y-%m-%d"); | |
| var color = d3.scaleQuantize() | |
| .domain([-.05, .05]) | |
| .range(d3.range(11).map(function(d) { return "q" + d + "-11"; })); | |
| var selection = _selection.selectAll("g") | |
| .data(myCards) | |
| .enter() | |
| .append("g") | |
| .attr("class", function (d,i) { return "card c" + i;}) | |
| .attr("transform", function (d, i) { return "translate(" + (68 + (i - 1) * 110) + ", 660) scale(0.1)";}); | |
| function daysData(d, i) { | |
| var allDays = d3.timeDays(new Date(2016, 0, 1), new Date(2017, 0, 1)); | |
| allDays.forEach(function(element, index, array) { | |
| array[index] = { value: element, card: i}; | |
| }); | |
| return allDays; | |
| }; | |
| var rect = selection.selectAll(".day") | |
| .data(daysData) | |
| .enter().append("rect") | |
| //.attr("class", function(d, i) { return (myCards[d.card].indexOf(i) != -1) ? "day color" : "day nocolor";}) | |
| .attr("class", function(d, i) { return (myCards[d.card].indexOf(shuffleMap.get(i)) != -1) ? "day color" : "day nocolor";}) | |
| .attr("width", cellSize) | |
| .attr("height", cellSize) | |
| .attr("x", function(data) { | |
| var d = data.value; | |
| var month_padding = 1.2 * cellSize*7 * ((month(d)-1) % (no_months_in_a_row)); | |
| return day(d) * cellSize + month_padding; | |
| }) | |
| .attr("y", function(data) { | |
| var d = data.value; | |
| var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) ); | |
| var row_level = Math.ceil(month(d) / (no_months_in_a_row)); | |
| return (week_diff*cellSize) + row_level*cellSize*8 - cellSize/2 - shift_up; | |
| }) | |
| .datum(format); | |
| var myDays = selection.selectAll("text.mydays") | |
| .data(d3.timeDays(new Date(2016, 0, 1), new Date(2017, 0, 1))) | |
| .enter().append("text") | |
| .attr("class", "mydays") | |
| .text(function(d) {return myDaysFormat(d);}) | |
| .attr("x", function(d) { | |
| var month_padding = 1.2 * cellSize*7 * ((month(d)-1) % (no_months_in_a_row)); | |
| return day(d) * cellSize + month_padding + cellSize / 2; | |
| }) | |
| .attr("y", function(d) { | |
| var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) ); | |
| var row_level = Math.ceil(month(d) / (no_months_in_a_row)); | |
| return (week_diff*cellSize) + row_level*cellSize*8 - cellSize/2 - shift_up + cellSize - 6; | |
| }) | |
| var month_titles = selection.selectAll(".month-title") | |
| .data(d3.timeMonths(new Date(2016, 0, 1), new Date(2017, 0, 1))) | |
| .enter().append("text") | |
| .text(monthTitle) | |
| .attr("x", function(d, i) { | |
| var month_padding = 1.2 * cellSize*7* ((month(d)-1) % (no_months_in_a_row)); | |
| return month_padding; | |
| }) | |
| .attr("y", function(d, i) { | |
| var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) ); | |
| var row_level = Math.ceil(month(d) / (no_months_in_a_row)); | |
| return (week_diff*cellSize) + row_level*cellSize*8 - cellSize - shift_up; | |
| }) | |
| .attr("class", "month-title") | |
| .attr("d", monthTitle); | |
| } | |
| function dayTitle (t0) { | |
| return t0.toString().split(" ")[2]; | |
| } | |
| function monthTitle (t0) { | |
| // return t0.toLocaleString("en-us", { month: "long" }); // doesn't work in Safari | |
| var monthFormat = d3.timeFormat("%B"); | |
| return monthFormat(t0); | |
| } | |
| function getShuffleMap(upperBound){ | |
| var shuffledArray = d3.range(1, upperBound, 1); | |
| if (shuffleSolution) {d3.shuffle(shuffledArray);} | |
| shuffleMap = d3.map(); | |
| unShuffleMap = d3.map(); | |
| shuffledArray.forEach(function (element, index) { | |
| shuffleMap.set(index, element); | |
| unShuffleMap.set(element, index); | |
| }); | |
| } | |
| function getMagicNumbers(upperBound) { | |
| var cards = []; | |
| var firstNumber; | |
| var max = Math.log(upperBound) * Math.LOG2E; // polyfill for IE where Math.log2 doesn't work | |
| // for (i = 0; i < Math.log2(upperBound); i++) { | |
| for (i = 0; i < max; i++) { | |
| cards[i] = []; | |
| firstNumber = Math.pow(2, i); | |
| for (number = 1; number <= upperBound; number++) { | |
| if (((Math.floor(number /firstNumber)) % 2) != 0) { | |
| cards[i].push(number); | |
| } | |
| } | |
| } | |
| // d3.shuffle(cards); | |
| return cards; | |
| } | |
| function nextCard(d, i) { | |
| d3.selectAll("circle").style("fill", "lightgrey").style("stroke-width", 1); | |
| if (d === "yes") {solution = solution + myCards[currentCard][0];} | |
| // remove card | |
| d3.select(".card.c" + currentCard) | |
| .transition() | |
| .attr("transform", "translate(400, 400) scale(0)"); | |
| currentCard++; | |
| if (currentCard < myCards.length) { | |
| // display next card | |
| console.log("next"); | |
| d3.select(".card.c" + currentCard) | |
| .transition() | |
| .attr("transform", "translate(170, 110) scale(0.8)"); | |
| } | |
| else { | |
| d3.selectAll("circle").remove(); | |
| d3.selectAll("text").remove(); | |
| d3.selectAll(".task").remove(); | |
| myDiv.append("h1").text("Please focus now!"); | |
| solution = unShuffleMap.get(solution); | |
| var solutionOutput = (solution <= 366) ? solutionFormat(solutionDays[solution]) : "That was too hard!?" | |
| console.log("solution: " + solution); | |
| console.log("solution date: " + solutionOutput); | |
| svg.append("rect") | |
| .attr("class", "solution") | |
| .attr("x", 50) | |
| .attr("y", 50) | |
| .attr("width", 900) | |
| .attr("height", 250) | |
| .style("fill", "lightblue"); | |
| svg.append("text") | |
| .attr("class", "solution") | |
| .text(solutionOutput) | |
| .attr("x", 500) | |
| .attr("y", 200) | |
| .style("font-size", "100px") | |
| .style("stroke", "black") | |
| .style("opacity", 0) | |
| .transition().duration(12000) | |
| .style("opacity", 1); | |
| } | |
| } | |
| // Production steps of ECMA-262, Edition 5, 15.4.4.14 | |
| // Reference: http://es5.github.io/#x15.4.4.14 | |
| if (!Array.prototype.indexOf) { | |
| Array.prototype.indexOf = function(searchElement, fromIndex) { | |
| var k; | |
| // 1. Let o be the result of calling ToObject passing | |
| // the this value as the argument. | |
| if (this == null) { | |
| throw new TypeError('"this" is null or not defined'); | |
| } | |
| var o = Object(this); | |
| // 2. Let lenValue be the result of calling the Get | |
| // internal method of o with the argument "length". | |
| // 3. Let len be ToUint32(lenValue). | |
| var len = o.length >>> 0; | |
| // 4. If len is 0, return -1. | |
| if (len === 0) { | |
| return -1; | |
| } | |
| // 5. If argument fromIndex was passed let n be | |
| // ToInteger(fromIndex); else let n be 0. | |
| var n = +fromIndex || 0; | |
| if (Math.abs(n) === Infinity) { | |
| n = 0; | |
| } | |
| // 6. If n >= len, return -1. | |
| if (n >= len) { | |
| return -1; | |
| } | |
| // 7. If n >= 0, then Let k be n. | |
| // 8. Else, n<0, Let k be len - abs(n). | |
| // If k is less than 0, then let k be 0. | |
| k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); | |
| // 9. Repeat, while k < len | |
| while (k < len) { | |
| // a. Let Pk be ToString(k). | |
| // This is implicit for LHS operands of the in operator | |
| // b. Let kPresent be the result of calling the | |
| // HasProperty internal method of o with argument Pk. | |
| // This step can be combined with c | |
| // c. If kPresent is true, then | |
| // i. Let elementK be the result of calling the Get | |
| // internal method of o with the argument ToString(k). | |
| // ii. Let same be the result of applying the | |
| // Strict Equality Comparison Algorithm to | |
| // searchElement and elementK. | |
| // iii. If same is true, return k. | |
| if (k in o && o[k] === searchElement) { | |
| return k; | |
| } | |
| k++; | |
| } | |
| return -1; | |
| }; | |
| } | |
| </script> | |
| </body> |
unshuffled version