birthday guesser (unshuffled version)

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:

just ask 9 yes/no questions
all questions must be independent, i.e. one question must not depend on an answer of a previous question
answering the questions should be straight forward, i.e. any 6-year old kid can answer them

(unshuffled version)

forked from EE2dev's block: birthday guesser (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 https://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 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>

https://d3js.org/d3.v4.min.js