patternjavascriptMinor
Hot Post-ato Guessing Game
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
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:
Why not bundle this all in
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
Code Structure:
Instead of using and calling globals, use a
That kind of format is better for linking functions and variables, which then you can use
Game Structure:
While your game seems to flow somewhat well, question -> answer, play again,
Your, or perhaps, the usage of
I always found
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:
Misleading comments:
Your comment in the following block is a tad wrong.
The function doesn't do a "single" round, it starts a loop.
Chat
This script attempts to append itself in
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.