Ever wanted to make something simple like a text based CHYOA game for your website?
Here’s a quick and ugly shortcode function that can be made into a game!
Time consuming and ugly to code, easy to embed anywhere in your website.
Like this:
Example:
When you click a button it will change the text of sample paragraph.
Introduction paragraph.
Make a choice.
Explanation:
This is accomplished with some html code and a simple bit of JavaScript.
By having a shortcode return a piece of html which includes both a paragraph with an id a few buttons and some JavaScript.
In its simplest form the JavaScript contains a function for each button which changes the text.
But with nested functions you change both the text and the functions for each of the buttons thus creating game to be navigated.
Shortcode:
/**
* Adds shortcode (David Stockdale).
*/
add_shortcode( 'test_game', 'test_game_shortcode' );
/**
* A test of simplistic chyoa shortcode (David Stockdale).
* Shortcode should be something like this:
* [test_game]
*/
function test_game_shortcode() {
return <<<HTML
<html>
<h2>Example:</h2>
<p>When you click a button it will change the text of sample paragraph.</p>
<p id="demo">Introduction paragraph.</p>
<p id="choice">Make a choice.</p>
<button id="btn1" onclick="choice1()">Choice 1</button>
<script type="text/javascript">
function choice1(page)
{
document.getElementById("demo").innerHTML = "You clicked choice 1, I am new paragraph.";
document.getElementById('btn1').innerHTML = "Choice 4";
document.getElementById('btn1').onclick = function() {
document.getElementById('demo').innerHTML = 'Hey There';
document.getElementById('btn1').innerHTML = "N/A";
document.getElementById('btn1').onclick = function() {
}
}
document.getElementById('btn2').innerHTML = "N/A";
document.getElementById('btn2').onclick = function() {
}
document.getElementById('btn3').innerHTML = "N/A";
document.getElementById('btn3').onclick = function() {
}
}
</script>
<button id="btn2" onclick="choice2()">Choice 2</button>
<script type="text/javascript">
function choice2(page)
{
document.getElementById("demo").innerHTML = "You clicked choice 2, I am new paragraph.";
document.getElementById('btn1').innerHTML = "N/A";
document.getElementById('btn1').onclick = function() {
}
document.getElementById('btn2').innerHTML = "N/A";
document.getElementById('btn2').onclick = function() {
}
document.getElementById('btn3').innerHTML = "N/A";
document.getElementById('btn3').onclick = function() {
}
}
</script>
<button id="btn3" onclick="choice3()">Choice 3</button>
<script type="text/javascript">
function choice3(page)
{
document.getElementById("demo").innerHTML = "You clicked choice 3, I am new paragraph.";
document.getElementById('btn1').innerHTML = "N/A";
document.getElementById('btn1').onclick = function() {
}
document.getElementById('btn2').innerHTML = "N/A";
document.getElementById('btn2').onclick = function() {
}
document.getElementById('btn3').innerHTML = "N/A";
document.getElementById('btn3').onclick = function() {
}
}
</script>
</html>
HTML;
}