Testing "Rock, Paper, Scissors" on WordPress


#1

Hello!
I would like to test my code and create different versions of it on my WordPress website.
I've tried but all I get is a blank page.
How would I get my webpage to run the game?

Thanks!

My code:

var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();

if (computerChoice < 0.34) {computerChoice = "rock";}
else if(computerChoice <= 0.67) {computerChoice = "paper";}
else {computerChoice = "scissors";}
console.log("Computer: " + computerChoice);

var compare = function(choice1,choice2) {
if(choice1 === choice2) {return "The result is a tie!";}

else if(choice1 === "rock") {
    if (choice2 === "scissors") {return "rock wins";}
    else {return "paper wins";}

}
else if (choice1 === "paper") {
    if(choice2 === "rock") {return "paper wins";}
    else {return "scissors wins";}

}
else if (choice1 === "scissors") {
    if(choice2 === "rock") {return "rock wins";}
    else {return "scissors wins";}
}

}
console.log (compare (userChoice, computerChoice));


#2

@malmn,

<!DOCTYPE html>
<head><title>Rock,Paper,Scissors!</title>
<style>
h2 {
    font-family:arial;
}
div {
   border: 1px solid black;
   height:20px;
   width:180px;
   text-align:center;
   }

form {
    display: inline-block;
}

#button {
    display: inline-block;
    height:20px;
	width:170px;
	background-color:#cc0000;
	font-family:arial;
	font-weight:bold;
	color:#ffffff;
	border-radius: 5px;
	text-align:center;
	margin-top:2px;
}

.list {
	font-family:garamond;
	color:#cc0000;
}
.uC {
   background-color:red;
  }
.cC {
   background-color:white;
  }
.result {
   background-color:blue;
  }

</style>
</head>
<body>
<!-- from Jquery - Modifying HTML Elements - 11. Click Da Button! Do It Naoughw! --></!-->
		<h2>Rock Paper Scissors</h2>
		<h5>Give your Choice (rock, paper, scissors)</h5>
		<form name="checkListForm">
			<input type="text,reset" name="checkListItem"/>
		</form>
		<div id="button">Show a Result</div>
		<br/>
		<div class="list" style="opacity: 0"></div>

  <div class="uC"></div>
  <div class="cC"></div>
  <div class="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript">
  
//var userChoice = prompt("Do you choose rock, paper or scissors?");
var main = function() {
 $('#button').click( function() {
     var userChoice = $('input[name=checkListItem]').val();
     var computerChoice = Math.random();
     if (computerChoice < 0.34) {
         computerChoice = "rock";
     }
	 else if(computerChoice <= 0.67) {
         computerChoice = "paper";
     }
	 else {
         computerChoice = "scissors";
     }
	 
     var compare = function(choice1, choice2) {
        if (choice1 === choice2) {
            return "The result is a tie!";
        }
		else if (choice1 === "rock") {
            if (choice2 === "scissors") {
                return "Rock wins";
            } 
			else {
                return "Paper wins";
			}
        }
		else if (choice1 === "paper") {
            if (choice2 === "rock") {
                return "Paper wins";
            } 
			else {
                return "Scissors wins";
			}
        }
		else if (choice1 === "scissors") {
            if (choice2 === "rock") {
                return "Rock wins";
            } 
			else {
                return "Scissors wins";
			}
		}
	}

  var result = compare(userChoice, computerChoice);
//   var docString= "<p>User: " + userChoice + "</p>" + 
//                  "<p>Computer: " + computerChoice + "</p>"+
//				  "<p>Result: " + result + "</p>"
//   document.write( docString);
  $('.uC').text("userChoice: " + userChoice);
  $('.cC').text("computerChoice: " + computerChoice);
  $('.result').text("Result: " + result);
  $('input[name=checkListItem]').val("");
   });
  };
  $(document).ready(main);
</script>

</body>
</html>

#3

@malmn,

In my code i used jQuery.
As you want to run the code in a Wordpress environment
you will have to do some extra's.

Do a google search to get some knowledge about the specifics....
== discussions / opinions ==
jquery vs wordpress site:stackoverflow.com
for instance
= http://stackoverflow.com/questions/11159860/how-do-i-add-a-simple-jquery-script-to-wordpress