Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- why i am not being directed to game.html after clicking on the buttons?
- The
- file Structure is server/server.js, public/index.html,public/game.html.
- index.html
- < !DOCTYPE html>
- <html>
- <title>QUIZ GAME</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
- <body>
- <!-- Navbar (sit on top) -->
- <div class="w3-top">
- <div class="w3-bar w3-white w3-wide w3-padding w3-card">
- <a href="#home" class="w3-bar-item w3-button"><b>QUIZ</b>Book</a>
- <!-- Float links to the right. Hide them on small screens -->
- <div class="w3-right w3-hide-small">
- <a href="#projects" class="w3-bar-item w3-button">CATEGORIES</a>
- <a href="#about" class="w3-bar-item w3-button">About</a>
- <a href="#contact" class="w3-bar-item w3-button">Contact</a>
- </div>
- </div>
- </div>
- <!-- Header -->
- <header class="w3-display-container w3-content w3-wide" style="max-
- width:1500px;" id="home">
- <img class="w3-image" src="pics/quiz.jpg" alt="Architecture" width="1500"
- height="800">
- <div class="w3-display-middle w3-margin-top w3-center">
- <h1 class="w3-xxlarge w3-text-white"><span class="w3-padding w3-black w3-
- opacity-min"><b>QUIZ</b></span> <span class="w3-hide-small w3-text-light-
- grey">Book</span></h1>
- </div>
- </header>
- <!-- Page content -->
- <div class="w3-content w3-padding" style="max-width:1564px">
- <!-- Project Section -->
- <div class="w3-container w3-padding-32" id="projects">
- <h3 class="w3-border-bottom w3-border-light-grey w3-padding-
- 16">CATEGORIES</h3>
- </div>
- <div class="w3-row-padding">
- <div class="w3-col l3 m6 w3-margin-bottom">
- <div class="w3-display-container">
- <button class="w3-button w3-hover-black" ><img src="pics/GK.jpg"
- alt="House" style="width:100%"><div class="content">
- <h3>GENERAL KNOWLEDGE</h3></div></button>
- </div>
- </div>
- <div class="w3-col l3 m6 w3-margin-bottom">
- <div class="w3-display-container">
- <button class="w3-button w3-hover-black"><img src="pics/maths_school.jpg"
- alt="House" style="width:100%"> </button>
- </div>
- </div>
- <div class="w3-col l3 m6 w3-margin-bottom">
- <div class="w3-display-container">
- <button class="w3-button w3-hover-black"><img src="pics/bollywood.jpg"
- alt="House" style="width:100%"> </button>
- </div>
- </div>
- <div class="w3-col l3 m6 w3-margin-bottom">
- <div class="w3-display-container">
- <button class="w3-button w3-hover-black"><img
- src="pics/hollywood.jpg" alt="House" style="width:100%"> </button>
- </div>
- </div>
- </div>
- <div class="w3-row-padding">
- <div class="w3-col l3 m6 w3-margin-bottom">
- <div class="w3-display-container">
- <button class="w3-button w3-hover-black"><img src="pics/cricket.jpg"
- alt="House" style="width:99%"> </button>
- </div>
- </div>
- <div class="w3-col l3 m6 w3-margin-bottom">
- <div class="w3-display-container">
- <button class="w3-button w3-hover-black"> <img src="pics/football.jpg"
- alt="House" style="width:99%"></button>
- </div>
- </div>
- <div class="w3-col l3 m6 w3-margin-bottom">
- <div class="w3-display-container">
- <button class="w3-button w3-hover-black"> <img src="pics/sports.jpg"
- alt="House" style="width:99%"> </button>
- </div>
- </div>
- <div class="w3-col l3 m6 w3-margin-bottom">
- <div class="w3-display-container">
- <button class="w3-button w3-hover-black"> <img src="pics/science.png"
- alt="House" style="width:99%"> </button>
- </div>
- </div>
- <div class="w3-col l3 m6 w3-margin-bottom">
- <div class="w3-display-container">
- <button class="w3-button w3-hover-black"><img src="pics/history.jpg"
- alt="House" style="width:99%"> </button>
- </div>
- </div>
- <div class="w3-col l3 m6 w3-margin-bottom">
- <div class="w3-display-container">
- <button class="w3-button w3-hover-black"> <img src="pics/music.png"
- alt="House" style="width:99%"> </button>
- </div>
- </div>
- <div class="w3-col l3 m6 w3-margin-bottom">
- <div class="w3-display-container">
- <button class="w3-button w3-hover-black"> <img src="pics/tennis.jpg"
- alt="House" style="width:99%"> </button>
- </div>
- </div>
- </div>
- <!-- About Section -->
- <div class="w3-container w3-padding-32" id="about">
- <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">About</h3>
- </div>
- <!-- Contact Section -->
- <div class="w3-container w3-padding-32" id="contact">
- <h3 class="w3-border-bottom w3-border-light-grey w3-padding-
- 16">Contact</h3>
- <p>Lets get in touch and talk about your and our next project.</p>
- <form action="/" target="_blank">
- <input class="w3-input" type="text" placeholder="Name" required
- name="Name">
- <input class="w3-input w3-section" type="text" placeholder="Email" required
- name="Email">
- <input class="w3-input w3-section" type="text" placeholder="Subject"
- required name="Subject">
- <input class="w3-input w3-section" type="text" placeholder="Comment"
- required name="Comment">
- <button class="w3-button w3-black w3-section" type="submit">
- <i class="fa fa-paper-plane"></i> SEND MESSAGE
- </button>
- </div>
- </div>
- <script>
- document.getElementsByClassName('w3-button w3-hover-black').onclick =
- function(){
- window.location.href = "https://localhost:3000/game.html";
- }
- </html>
- in game.html
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>QUIZ book</title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
- </head>
- <body>
- <div id = "gameDiv"></div>
- <script src = "/socket.io/socket.io.js"></script>
- <script src = "lib/phaser.min.js"></script>
- <script src = "main.js"></script>
- <script src = "player.js"></script>
- </body>
- </html>
- in server/server.js
- var express = require('express');
- var socketIo = require('socket.io');
- var path = require('path');
- var http = require('http');
- var app = express();
- const port = process.env.PORT ||3000 ;
- const pathjoin = path.join(__dirname, '../public');
- const pathjoin1 = path.join(__dirname,'../public/game.html');
- var server = http.createServer(app);
- app.use(express.static(pathjoin));
- app.use('/game.html',express.static(pathjoin1));
- var io = socketIo(server);
- io.on('connection',(socket)=>{
- console.log('user connected ' + socket.id);
- });
- server.listen(port,()=>{
- console.log('server started');
- });
Add Comment
Please, Sign In to add comment