Tag Archives: Español

Game – Bible Book Master

Yesterday I really wanted to make a multi-lingual so I decided to make a game in which you have to go through all of the books of the Bible as fast as you can. I still need to do some work on the game to make it more user-friendly, but the following (which can also be accessed here) is what I came up with:

As of when I wrote this post the game supported 9 languages including English, Spanish, Vietnamese, Korean, and Haitian Creole. I chose the languages based on those in which I could find the names of all 66 Bible books. In fact, in all cases except for Vietnamese I used the Online Watchtower Library on jw.org in order to get the bible book names, using this JavaScript code in the web console:

$('.book .name').map(function() {
  return $(this).text();

As far as translating the rest of the words in the game, since I kept the amount of text to a minimum I simply used good ol’ Google Translate.

Since I wrote the server-side in PHP I ended up using $_SERVER['HTTP_ACCEPT_LANGUAGE'] to auto-detect the language if it wasn’t set:

$lang_code = valueOf($_REQUEST['lang'], preg_replace("/\W.*/", "", $_SERVER['HTTP_ACCEPT_LANGUAGE']));

Finally, I spent way more time than I wanted to on the rounded CSS3 buttons:

.round-button {
  font-size: 64px;
  line-height: 3em;
  height: 3em;
  width: 3em;
  border-radius: 3em;
  background: #000;
  color: #FFF;
  display: inline-block;
  text-align: center;
  font-family: fontello;
  transition: 0.5s cubic-bezier(0.5,0.5,0.5,0.5) all;
  cursor: pointer;
  box-shadow: 0 0 0.25em #000;
  z-index: 1;
  position: relative;
  border: 0.05em solid #000;
  padding: 0.45em;
  margin: 0.5em;
  box-shadow: 0 0 1em 0.5em rgba(0,0,0,0.5) inset, 0 0 0 #000;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
.round-button .text {
  font-size: 0;
  position: absolute;
  line-height: 1em;
  margin-top: -2em;
  display: block;
  width: 6em;
  text-align: center;
  text-shadow: 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF;
  transition: 0.5s ease all;
.round-button:hover {
  box-shadow: 0 0 0 0 #000 inset, 0 0 0.125em 0.125em #FFF, 0 0 0.0625em 0.25em rgba(0,0,0,0.5);
  background: #FFF!important;
  z-index: 2;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  color: #000;
  padding: 0;
  border-width: 0.5em;
.round-button:hover .text {
  font-size: 0.5em;
  text-shadow: 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF;
.round-button:active {
  box-shadow: 0 0 1em 0.1em #777 inset, 0 0 0.125em 0.125em #FFF, 0 0 0.0625em 0.25em rgba(0,0,0,0.5);
  transition: 0.1s ease box-shadow;

As you will see in the game, each rounded button is actually individually colored. For example, the following is for the facebook button:

.round-button.facebook {
  background: #3b5998;
  border-color: #3b5998;
.round-button.facebook:hover {
  color: #3b5998;

All-in-all I am happy with how this game turned out but I would like to add a few improvements. Try the Bible Book Master game out yourself and let me know what you think. :cool:

¿Ha cambiado Google por el mejor o el peor?

Hace un mes atrás yo anoté una diferencia en el número de visitas a mi blog pero no supe a que se debió hasta hoy. Google acaba de dejar el público saber que realizaron cambios en su motor de búsqueda alrededor de ese tiempo. Se puede preguntar, ¿por qué? Ellos hicieron los cambios para “mejorar las consultas extensas y complejas de los usuarios” según ElMundo.es. Según Google, muchas consultas de los últimos años han sido más complejas y por eso ellos querían mantener paso con los usuarios.

Lo interesante es que ahora Google está intentando dar significado a las frases que tecleamos para servirnos mejores resultados. En otras palabras, están tratando de aproximarse un poco más a inteligencia artificial, ¿no? Entonces, aunque perdí casi la mitad del tráfico a mi blog (de ~2,000 a la semana hasta ~1,000) debido a este cambio, todavía estoy ansioso para ver los resultados de dichos cambios. Aunque no he anotado mejores resultados, creo que si una compañía debe tratar este cambio, ¡debe ser Google! Si quiere leer más información, lea este breve artículo de ElMundo.es.