Project Demo: This Or That App | Javascript, HTML, CSS, Ruby on Rails

Step 1: Setup

“Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite.”

Step 2: One At a Time

Database Schema

Step 3: The User Flow

— Can go through each question and select one option

  • Can click on one of the options
  • Cannot click again or on the other option
  • Can see statistics based on selection
  • Can proceed into the next question
  • Can accumulate score

— Can submit their name

  • Can see their score and result
  • Can submit their name in the form

— Can see a list of top 10 players with ranked scores

  • Can see their name highlighted
  • Can click on each player and see their comments
  • Can double click and hide their comments
  • Can leave a comment and see it posted
document.addEventListener("DOMContentLoaded", function() {
loadQuestion();
askPlayerName();
displayPlayers();
})

Step 4: HTML first, Javascript follows

<body>
<div class="container" id="question-container">
<div class="hidden" id="errors"></div>
<div class="card" id="left-option">
Gryffindor
</div>
<div class="card" id="right-option">
Slytherin
</div>
</div>
</body>

How to Play

Simply download and cd into the directory
$ cd /path
Make sure to install all dependencies.
$ bundle install

Configure database and start Rails server.

$ rake db:migrate
$ rake db:seed
$ rails server

Open the index.html file in browser and start the game!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sophie G.

Sophie G.

Blockchain. Coding. Social Impact.