HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Hot Post-ato Guessing Game

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
hotatopostgameguessing

Problem

On almost every page in the Stack Exchange Network, there lives a list of some the current "hot" questions across the network (sometimes abbreviated HNQs). Some of these posts have very exotic titles (especially the ones from Arqade) and some have very simple titles.

Either way, I've always found it fun to try and guess what site an question title is associated with. As a result, I created a UserScript that plants this game into a Stack Exchange webpage.

```
// ==UserScript==
// @name Hot Question Game
// @namespace https://github.com/SirPython/Hot-Postato
// @version 0.1
// @description A Stack Exchange mini game
// @author SirPython
// @match ://.stackexchange.com/*
// @match ://.stackoverflow.com/*
// @match ://.superuser.com/*
// @match ://.serverfault.com/*
// @match ://.askubuntu.com/*
// @match ://.stackapps.com/*
// @match ://.mathoverflow.net/*
// @grant none
// ==/UserScript==
/ jshint -W097 /
'use strict';

/ Place a button that says "play" right next to "help" in the top-left /
var button = createTopbarButton();
var topbar = document.getElementsByClassName("topbar-menu-links")[0];
topbar.appendChild(button);

var questions = getHNQuestions();

/**
* Play a single round of the guessing game. If the user wishes to
* play again, they can click the play button again.
*/
function play() {
do {
var toGuess = questions[Math.floor(Math.random() * questions.length - 1)];
var guess = prompt(toGuess.title);

/ Case-insensitive string checking /
if(!new RegExp(guess, "i").test(toGuess.site)) {
alert("Incorrect! The answer is...\n" + toGuess.site);
} else {
alert("Correct!");
}
} while(confirm("Play again?"));
}

/**
* Represents a single question in the HNQ list.
*/
function HNQuestion(site, title) {
this.site = site;
this.title = title;
}
/**
* Gets all the questions in

Solution

Button adding:

var button = createTopbarButton();
var topbar = document.getElementsByClassName("topbar-menu-links")[0];
topbar.appendChild(button);


Why not bundle this all in createTopbarButton?

function createTopbarButton() {
    var topbar = document.getElementsByClassName("topbar-menu-links")[0];;
    var button = document.createElement("a");
    button.href = "#";
    button.onclick = play;
    button.innerHTML = "play";
    topbar.appendChild(button)
}


Strange Indentation:

(I couldn't identify the issue, though...)

Regex issues

Your regex does a search through the string for instances of the characters, but what happens if I put in a single character, a vowel, for instance?

Using e as a challenge string gave me correct answers in most cases.

Code Structure:

Instead of using and calling globals, use a prototype chain instead.

var HotPostatoGame = function(){};
HotPostatoGame.prototype.gameLoop = function(){};


That kind of format is better for linking functions and variables, which then you can use this to store internal variables, just like in your HNQ constructor.

Game Structure:

While your game seems to flow somewhat well, question -> answer, play again,

Your, or perhaps, the usage of alerts is kind of annoying.

I always found alerts like forcefully delivering a message, you want to be delivering it peacefully and in a nice dialog, thus, I would suggest creating a dialog box, or using a dialog plugin.

Additionally this will allow you to deliver the content better and add an end game button for when you want to end the game mid-game.

Beyond that, I would consider implementing a score check, and from that a check to make sure you don't ask the same question twice in the game.

Misc:

  • Hot Question Game: why is the UserScript name different to the project one?



  • You can use a ternary here:



if(!new RegExp(guess, "i").test(toGuess.site)) {
        alert("Incorrect! The answer is...\n" + toGuess.site);
    } else {
        alert("Correct!");
    }


  • I don't know where you were going with the spacing between your operators on this one:



var site = questionElements[i].children[0].title;
    var title= questionElements[i].children[1].innerHTML;


Misleading comments:

Your comment in the following block is a tad wrong.

/**
 * Play a single round of the guessing game. If the user wishes to 
 * play again, they can click the play button again.
 */
function play() {


The function doesn't do a "single" round, it starts a loop.

Chat

This script attempts to append itself in chat.stackexchange.com, where it fails because the header doesn't exist.

Code Snippets

var button = createTopbarButton();
var topbar = document.getElementsByClassName("topbar-menu-links")[0];
topbar.appendChild(button);
function createTopbarButton() {
    var topbar = document.getElementsByClassName("topbar-menu-links")[0];;
    var button = document.createElement("a");
    button.href = "#";
    button.onclick = play;
    button.innerHTML = "play";
    topbar.appendChild(button)
}
var HotPostatoGame = function(){};
HotPostatoGame.prototype.gameLoop = function(){};
if(!new RegExp(guess, "i").test(toGuess.site)) {
        alert("Incorrect! The answer is...\n" + toGuess.site);
    } else {
        alert("Correct!");
    }
var site = questionElements[i].children[0].title;
    var title= questionElements[i].children[1].innerHTML;

Context

StackExchange Code Review Q#114429, answer score: 7

Revisions (0)

No revisions yet.