asolkar/emoji-word-puzzle.html

## emoji-word-puzzle.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Emoji Puzzle</title>
        <meta name="description" content="Emoji code">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->
        <style type="text/css">
body {
  font-family: sans-serif;
}
#wrapper {
  width: 970px;
  clear: both;
  float: left;
  margin: 10px;
}
#mapkey {
  width: 970px;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  border: 2px solid #ccc;
  text-align: center;
}
#puzzle {
  padding-top: 20px;
  border: 2px solid #ccc;
}
.map-table .map-cell {
  display: inline-block;
  border: thin solid #ccc;
  margin-left: 15px;
  margin-right: 15px;
  font-size: x-large;
  font-weight: bold;
  line-height: 1.2em;
}
.map-table .key {
  color: #aaa;
}
.map-table .val, .map-table .key {
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent transparent transparent;
  display: inline-block;
  width: 50px;
  top: -0.6em;
  padding: 5px;
}
.sep {
  margin-top: 2px;
  border: none;
}
.word-table {
  margin-bottom: 40px;
  display: inline-block;
}
.word-table .val {
  font-size: xx-large;
  font-weight: bold;
  line-height: 1.2em;
  padding: 0.1em;
  display: inline-block;
  width: 1.2em;
  border: thin solid #ccc;
  }
#puzzle .cnt {
  display: inline-block;
  width: 3em;
  padding: 5px;
  font-size: large;
  color: #aaa;
  font-weight: bold;
}
.triangle-border {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.6em 0 0.6em 5px;
  border-color: transparent transparent transparent #eee;
  display: inline-block;
  vertical-align: middle;
}
#answers {
  font-size: small;
  color: #ccc;
}
#next-page {
  margin-top: 20em;
}
#answers .cnt {
  width: 3em;
}
#answers .cnt, #answers .val {
  display: inline-block;
}
        </style>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <div id="wrapper">
          <h1>Key</h1>

          <div id="mapkey">
          </div>

          <h1>Puzzle</h1>
          <div id="puzzle">
          </div>

          <div id="next-page"></div>
          <h1>Answers</h1>
          <div id="answers">
          </div>
        </div>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script language="javascript">
var random_map = 1;
var random_words = 1;
var print_answers = 1;
var num_words = 25;
var words = [];

var word_cnt;

//
// Emojies from http://emojipedia.org/
//
var emoji_code_map = {
  'A' : '1F42C', // 🐬
  'B' : '1F938', // 🤸
  'C' : '1F382', // 🎂
  'D' : '1F381', // 🎁
  'E' : '1F370', // 🍰
  'F' : '1F3C0', // 🏀
  'G' : '1F30B', // 🌋
  'H' : '1F386', // 🎆
  'I' : '1F355', // 🍕
  'J' : '1F3A5', // 🎥
  'K' : '1F37F', // 🍿
  'L' : '1F366', // 🍦
  'M' : '1F4A9', // 💩
  'N' : '1F415', // 🐕
  'O' : '1F32D', // 🌭
  'P' : '1F3C6', // 🏆
  'Q' : '1F3CA', // 🏊
  'R' : '1F3AF', // 🎯
  'S' : '1F3BA', // 🎺
  'T' : '1F3B9', // 🎹
  'U' : '1F47D', // 👽
  'V' : '1F383', // 🎃
  'W' : '1F36C', // 🍬
  'X' : '1F680', // 🚀
  'Y' : '1F984', // 🦄
  'Z' : '1F496', // 💖
  ' ' : '200A'   // space
};

function show_map(emomap) {
  var items = [];
  var cnt = 0;
  $.each(emomap, function(key, val) {
    if (key != " ") {
      items.push('<div class="map-cell">'
        + '<div class="val">&#x' + val + ';</div>'
        + '<div class="triangle-border">&nbsp;</div>'
        + '<div class="key">' + key + '</div>'
        + '</div>');
      cnt++;
      if ((cnt % 5) == 0) {
        items.push('<hr class="sep" />');
      }
    }
  });

  $( "<div/>", {
    "class": "map-table",
    html: items.join("")
  }).appendTo("#mapkey");
}

function show_word(word) {
  var items = [];
  var cnt = 0;

  $("<div/>", {
    "class": "cnt",
    html: word_cnt
  }).appendTo("#puzzle");

  $.each(word.split(''), function(idx,char) {
    items.push( '<div class="val">&#x' + emoji_code_map[char] + ';</div>' );
    cnt++;
  });

  $( "<div/>", {
    "class": "word-table",
    html: items.join("")
  }).appendTo("#puzzle");
  $("<hr/>", {
    "class": "sep"
  }).appendTo("#puzzle");

  words.push(word);
  word_cnt++;
}

function show_answers() {
  var items = [];
  word_cnt = 1;

  $.each(words, function(idx,wd) {
    items.push( '<div class="answer"><div class="cnt">' + word_cnt + '</div><div class="val">' + wd + '</div></div>');
    word_cnt++;
  });

  $( "<div/>", {
    "class": "answer-list",
    html: items.join("")
  }).appendTo("#answers");
}

function show_api_word(resp) {
  show_word(resp['Word'].toUpperCase());

  num_words--;
  if (num_words > 0) {
    random_word();
  } else {
    if (print_answers) {
      show_answers();
    }
  }
}

function random_in_range(st,en) {
    return Math.floor(Math.random()*(en-st+1)+st);
}

function random_word() {
    var requestStr = "http://randomword.setgetgo.com/get.php";

    $.ajax({
        type: "GET",
        url: requestStr,
        dataType: "jsonp",
        jsonpCallback: 'show_api_word'
    });
}
function randomize_map(emomap) {
  var uni_start = parseInt('1F300', 16);
  var uni_end = parseInt('1F5FF', 16);
  var items = {
    ' ' : '200A'   // space
  };

  $.each(emomap, function(key, val) {
    if (key != " ") {
      items[key] = random_in_range(uni_start, uni_end).toString(16);
    }
  });
  return items;
}
    </script>
    <script language="javascript">
if (random_map) {
  emoji_code_map = randomize_map(emoji_code_map);
}
show_map(emoji_code_map);
word_cnt = 1;
if (random_words) {
  random_word();
} else {
  show_word("DECATHLON");
  show_word("GOLD MEDAL");
  show_word("SIMONE BILES");
  show_word("TRACK AND FIELD");
  show_word("MICHAEL PHELPS");
  show_word("SWIMMING");
  show_word("OLYMPICS");
  show_word("RIO DE JANEIRO");
  show_word("VOLLEYBALL");
  show_word("USAIN BOLT");
}
if (print_answers && !random_words) {
  show_answers();
}
    </script>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Emoji Puzzle</title>
	<meta name="description" content="Emoji code">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	<!-- Place favicon.ico in the root directory -->
	<style type="text/css">
	body {
	font-family: sans-serif;
	}
	#wrapper {
	width: 970px;
	clear: both;
	float: left;
	margin: 10px;
	}
	#mapkey {
	width: 970px;
	margin-bottom: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	border: 2px solid #ccc;
	text-align: center;
	}
	#puzzle {
	padding-top: 20px;
	border: 2px solid #ccc;
	}
	.map-table .map-cell {
	display: inline-block;
	border: thin solid #ccc;
	margin-left: 15px;
	margin-right: 15px;
	font-size: x-large;
	font-weight: bold;
	line-height: 1.2em;
	}
	.map-table .key {
	color: #aaa;
	}
	.map-table .val, .map-table .key {
	border-style: solid;
	border-width: 0 0 0 0;
	border-color: transparent transparent transparent transparent;
	display: inline-block;
	width: 50px;
	top: -0.6em;
	padding: 5px;
	}
	.sep {
	margin-top: 2px;
	border: none;
	}
	.word-table {
	margin-bottom: 40px;
	display: inline-block;
	}
	.word-table .val {
	font-size: xx-large;
	font-weight: bold;
	line-height: 1.2em;
	padding: 0.1em;
	display: inline-block;
	width: 1.2em;
	border: thin solid #ccc;
	}
	#puzzle .cnt {
	display: inline-block;
	width: 3em;
	padding: 5px;
	font-size: large;
	color: #aaa;
	font-weight: bold;
	}
	.triangle-border {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.6em 0 0.6em 5px;
	border-color: transparent transparent transparent #eee;
	display: inline-block;
	vertical-align: middle;
	}
	#answers {
	font-size: small;
	color: #ccc;
	}
	#next-page {
	margin-top: 20em;
	}
	#answers .cnt {
	width: 3em;
	}
	#answers .cnt, #answers .val {
	display: inline-block;
	}
	</style>
	</head>
	<body>
	<!--[if lt IE 8]>
	<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
	<![endif]-->

	<!-- Add your site or application content here -->
	<div id="wrapper">
	<h1>Key</h1>

	<div id="mapkey">
	</div>

	<h1>Puzzle</h1>
	<div id="puzzle">
	</div>

	<div id="next-page"></div>
	<h1>Answers</h1>
	<div id="answers">
	</div>
	</div>
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script language="javascript">
	var random_map = 1;
	var random_words = 1;
	var print_answers = 1;
	var num_words = 25;
	var words = [];

	var word_cnt;

	//
	// Emojies from http://emojipedia.org/
	//
	var emoji_code_map = {
	'A' : '1F42C', // 🐬
	'B' : '1F938', // 🤸
	'C' : '1F382', // 🎂
	'D' : '1F381', // 🎁
	'E' : '1F370', // 🍰
	'F' : '1F3C0', // 🏀
	'G' : '1F30B', // 🌋
	'H' : '1F386', // 🎆
	'I' : '1F355', // 🍕
	'J' : '1F3A5', // 🎥
	'K' : '1F37F', // 🍿
	'L' : '1F366', // 🍦
	'M' : '1F4A9', // 💩
	'N' : '1F415', // 🐕
	'O' : '1F32D', // 🌭
	'P' : '1F3C6', // 🏆
	'Q' : '1F3CA', // 🏊
	'R' : '1F3AF', // 🎯
	'S' : '1F3BA', // 🎺
	'T' : '1F3B9', // 🎹
	'U' : '1F47D', // 👽
	'V' : '1F383', // 🎃
	'W' : '1F36C', // 🍬
	'X' : '1F680', // 🚀
	'Y' : '1F984', // 🦄
	'Z' : '1F496', // 💖
	' ' : '200A' // space
	};

	function show_map(emomap) {
	var items = [];
	var cnt = 0;
	$.each(emomap, function(key, val) {
	if (key != " ") {
	items.push('<div class="map-cell">'
	+ '<div class="val">&#x' + val + ';</div>'
	+ '<div class="triangle-border"> </div>'
	+ '<div class="key">' + key + '</div>'
	+ '</div>');
	cnt++;
	if ((cnt % 5) == 0) {
	items.push('<hr class="sep" />');
	}
	}
	});

	$( "<div/>", {
	"class": "map-table",
	html: items.join("")
	}).appendTo("#mapkey");
	}

	function show_word(word) {
	var items = [];
	var cnt = 0;

	$("<div/>", {
	"class": "cnt",
	html: word_cnt
	}).appendTo("#puzzle");

	$.each(word.split(''), function(idx,char) {
	items.push( '<div class="val">&#x' + emoji_code_map[char] + ';</div>' );
	cnt++;
	});

	$( "<div/>", {
	"class": "word-table",
	html: items.join("")
	}).appendTo("#puzzle");
	$("<hr/>", {
	"class": "sep"
	}).appendTo("#puzzle");

	words.push(word);
	word_cnt++;
	}

	function show_answers() {
	var items = [];
	word_cnt = 1;

	$.each(words, function(idx,wd) {
	items.push( '<div class="answer"><div class="cnt">' + word_cnt + '</div><div class="val">' + wd + '</div></div>');
	word_cnt++;
	});

	$( "<div/>", {
	"class": "answer-list",
	html: items.join("")
	}).appendTo("#answers");
	}

	function show_api_word(resp) {
	show_word(resp['Word'].toUpperCase());

	num_words--;
	if (num_words > 0) {
	random_word();
	} else {
	if (print_answers) {
	show_answers();
	}
	}
	}

	function random_in_range(st,en) {
	return Math.floor(Math.random()*(en-st+1)+st);
	}

	function random_word() {
	var requestStr = "http://randomword.setgetgo.com/get.php";

	$.ajax({
	type: "GET",
	url: requestStr,
	dataType: "jsonp",
	jsonpCallback: 'show_api_word'
	});
	}
	function randomize_map(emomap) {
	var uni_start = parseInt('1F300', 16);
	var uni_end = parseInt('1F5FF', 16);
	var items = {
	' ' : '200A' // space
	};

	$.each(emomap, function(key, val) {
	if (key != " ") {
	items[key] = random_in_range(uni_start, uni_end).toString(16);
	}
	});
	return items;
	}
	</script>
	<script language="javascript">
	if (random_map) {
	emoji_code_map = randomize_map(emoji_code_map);
	}
	show_map(emoji_code_map);
	word_cnt = 1;
	if (random_words) {
	random_word();
	} else {
	show_word("DECATHLON");
	show_word("GOLD MEDAL");
	show_word("SIMONE BILES");
	show_word("TRACK AND FIELD");
	show_word("MICHAEL PHELPS");
	show_word("SWIMMING");
	show_word("OLYMPICS");
	show_word("RIO DE JANEIRO");
	show_word("VOLLEYBALL");
	show_word("USAIN BOLT");
	}
	if (print_answers && !random_words) {
	show_answers();
	}
	</script>
	</html>