How Do I Set the condition for a user to have to fill in a Textfield


Tags: javascript,jquery,html,css,html5

Problem :

Quick Question I have a textfeild and a button

<h4 style="color:white;">Enter Player Name</h4>
<input type="text" name="PlayerName" placeholder=""style="border :5px groove #8E2B2B; border-radius: 15px;width:155px;height:25px;">
<hr>
    <center><button class="start"><b><i>START</i></b></button></center>

Currently When the user hits the button it plays the game regardless of of weather the textfeild is filled in

I need help to stop the button functions from going off until the feild is filled in

$(document).ready(function () { //document ready

    $('.start').on('mouseup', function () { //initialise a game when the start button is clicked
        $(this).hide();
        game.difficulty = $('input[name=difficulty]:checked').val();
        $('.difficulty').hide();
        game.init();


    });
    });

All I need is help with a jquery that will not run the game until a name is enetered in the text field

Here is running version for you to see

var game = { //game object
    level: 1, //current level
    turn: 0, //current turn
    difficulty: 1, // user difficulty
    score: 0, //current score
    active: false, //whether a turn is active or not
    handler: false, // whether the click and sound handlers are active
    shape: '.shape', // cached string for the pad class
    genSequence: [], //array containing the generated/randomized pads
    plaSequence: [], //array containing the users pad selections
    colors: ['Green', 'Red', 'Yellow', 'Blue'],
    init: function () { //initialises the game
        if (this.handler === false) { //checks to see if handlers are already active
            this.initPadHandler(); //if not activate them
        }
        this.newGame(); //reset the game defaults

    },

    initPadHandler: function () {

        that = this;

        $('.pad').on('mouseup', function () {

            if (that.active === true) {

                var pad = parseInt($(this).data('pad'), 10);

                that.flash($(this), 1, 300, pad);

                that.logPlayerSequence(pad);

            }
        });

        this.handler = true;

    },

    newGame: function () { //resets the game and generates a starts a new level

        this.level = 1;
        this.score = 0;
        this.newLevel();
        this.displayLevel();
        this.displayScore();

        //initialize timer to 10 seconds (10.0)
        this.timer = 10;

    },

    newLevel: function () {

        this.genSequence.length = 0;
        this.plaSequence.length = 0;
        this.pos = 0;
        this.turn = 0;
        this.active = true;

        this.randomizePad(this.level); //randomize pad with the correct amount of numbers for this level
        this.displaySequence(); //show the user the sequence
    },

    flash: function (element, times, speed, pad) { //function to make the pads appear to flash

        var that = this; //cache this

        if (times > 0) { //make sure we are supposed to flash
            that.playSound(pad); //play the corresponding pad sound
			
			if ($("#flash").is(":checked")) {//Check Box Function
            element.stop().animate({
                opacity: '1'
            }, { //animate the element to appear to flash
                duration: 50,
                complete: function () {
                    element.stop().animate({
                        opacity: '0.6'
                    }, 200);
                }
            }); //end animation

        }
		

        if (times > 0) { //call the flash function again until done the correct amount of times 
            setTimeout(function () {
                that.flash(element, times, speed, pad);
            }, speed);
            times -= 1; //times - 1 for each time it's called
        }
		}
    },
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    playSound: function (clip) { //plays the sound that corresponds to the pad chosen
        if ($("#sound").is(":checked")) {//Check Box Function
            var sound = $('.sound' + clip)[0];
            console.log(sound);
            console.log($('.sound' + clip));
            sound.currentTime = 0; //resets audio position to the start of the clip
            sound.play(); //play the sound
		}
    },

    randomizePad: function (passes) { //generate random numbers and push them to the generated number array iterations determined by current level

        for (i = 0; i < passes; i++) {

            this.genSequence.push(Math.floor(Math.random() * 4) + 1);

        }
    },

    logPlayerSequence: function (pad) { //log the player selected pad to user array and call the checker function

        this.plaSequence.push(pad);
        this.checkSequence(pad);


    },

    checkSequence: function (pad) { //checker function to test if the pad the user pressed was next in the sequence

        that = this;

        if (pad !== this.genSequence[this.turn]) { //if not correct 

            this.incorrectSequence();

        } else { //if correct
            this.keepScore(); //update the score
            this.turn++; //incrememnt the turn

        }

        if (this.turn === this.genSequence.length) { //if completed the whole sequence

            this.level++; //increment level, display it, disable the pads wait 1 second and then reset the game
            this.displayLevel();
            this.active = false;

            // Stop counting when sequence is correct to avoid time running out before starting next level
            clearInterval(this.timerInterval);

            //Add 5.0 seconds each 5th level
            this.timer = 10 + 5 * Math.floor(this.level / 5);

            //Update timerdisplay to show fulltime while displaying next level sequence
            $(".Timer p").html(this.timer);

            setTimeout(function () {
                that.newLevel();
            }, 1000);
        }
    },

    // Countdown and update timer, call incorrectsequence when time's up
    countDown: function () {
        this.timer -= 0.1;
        $(".Timer p").html(this.timer.toFixed(1)); // Display 9.0 instad of 9
        if (this.timer < 0.1) {
            this.incorrectSequence();
        }
    },

    displaySequence: function () { //display the generated sequence to the user

        var that = this;

        var timerCount = 0;

        $.each(this.genSequence, function (index, val) { //iterate over each value in the generated array
            timerCount = index;
            setTimeout(function () {

                that.flash($(that.shape + val), 1, 300, val);
				if ($("#text").is(":checked")) {//Check Box Function
				
                $(".TextBox").children(":first").html('<b>' + (index + 1) + " : " +that.colors[val-1]+'</b>');
				}
            }, 500 * index * that.difficulty); // multiply timeout by how many items in the array so that they play sequentially and multiply by the difficulty modifier
			
        });

        // Wait to start timer until full sequence is displayed
        setTimeout(function () {
            that.timerInterval = setInterval(function () {
                that.countDown()
            }, 100)

            setTimeout(function () {
                $(".TextBox").children(":first").html('');
            }, 500);
        }, 500 * timerCount * that.difficulty);
    },

    displayLevel: function () { //just display the current level on screen

        $('.level h2').text('Level: ' + this.level);

    },

    displayScore: function () { //display current score on screen
        $('.score h2').text('Score: ' + this.score);
    },

    keepScore: function () { //keep the score

        var multiplier = 0;

        switch (this.difficulty) //choose points modifier based on difficulty
        {
            case '2':
                multiplier = 1;
                break;

            case '1':
                multiplier = 2;
                break;

            case '0.5':
                multiplier = 3;
                break;

            case '0.25':
                multiplier = 4;
                break;
        }

        this.score += (1 * multiplier); //work out the score

        this.displayScore(); //display score on screen
    },

    incorrectSequence: function () { //if user makes a mistake	

        //Stop counting down timer and display start message
        clearInterval(this.timerInterval);
        $(".Timer p").html("<b>Game Over</b>");

        var corPad = this.genSequence[this.turn], //cache the pad number that should have been pressed

            that = this;
        this.active = false;
        this.displayLevel();
        this.displayScore();

        setTimeout(function () { //flash the pad 4 times that should have been pressed
            that.flash($(that.shape + corPad), 4, 300, corPad);
        }, 500);

        $(".TextBox").children(":first").html("<b>The Right Answer was  " + that.colors[corPad - 1] + " Try Again </b>");

        $('.start').show(); //enable the start button again and allow difficulty selection again
        $('.difficulty').show();

    }

};
$(document).ready(function () { //document ready

    $('.start').on('mouseup', function () { //initialise a game when the start button is clicked
        $(this).hide();
        game.difficulty = $('input[name=difficulty]:checked').val();
        $('.difficulty').hide();
        game.init();


    });
	});
body {
background-color: #333;
}

input[type="radio"] {
    vertical-align: baseline;
    padding: 10px;
    margin: 10px;
}

li {
  display: inline-block;
}

/* This is the new image part just add in it here  */
.logo{
  position: relative;
  width:350px;
  height:180px;
  background-image: url("GroupLogo1.png");
  background-size:90%;
  background-repeat: no-repeat;
}
/* It ends here  */

.Informationhead{
  position: relative;
  width: 1120px;
  height:50px;
  margin: 0 auto;
  border: 5px groove #8E2B2B;
  border-radius: 15px;
  text-align:center;
  color: black;
  margin-bottom:2.5px;
  cursor: pointer; cursor: hand; 
  font-family: "Arial Black", Arial;
  font-weight: 900;
  font-size: 16px;
}

.Information{
  position: relative;
  width: 1000px;
  height:400px;
  margin: 0 auto;
  display:none;
  text-align:center;
  background-image: url("Info4.png");
  background-size:100%;
  padding-top:45px;
  margin-bottom:10px;
  margin-left:300px:
}

.InfoText{
  position: relative;
  width: 820px;
  margin: 0 auto;
  font-family: "Arial Black", Arial;
  font-weight: 900;
  font-size: 13.5px;
}

.wrapper {
  position: relative;
  width: 900px;
  margin: 0 auto ;
  border: 5px groove #8E2B2B;
  border-radius: 15px;
  padding-left:220px;
  margin-bottom:2.5px;
}


.wrapper2{
  position: absolute;
  width: 165px;
  height:510px;
  margin: 0 auto;
  border: 3.5px groove #8E2B2B;
  border-radius: 15px;
  margin-top:10px;
  padding:5px;
  margin-left: -18%;
  font-family: "Arial Black", Arial;
  font-weight: 900;
  font-size: 15px;
}

.wrapper3{
  position: absolute;
  background-size:100%;
  width: 200px;
  height:380px;
  margin-left: 60%;
  margin-top:10px;
  padding:5px;
  border: 3.5px groove #8E2B2B;
  border-radius: 15px;
  text-align:center;
  font-family: "Arial Black", Arial;
  font-weight: 900;
  font-size: 15.5px;
}


.back {
  position: relative;
  width: 648px;
  height: 648px;
  z-index: 0;
  background-color: #000;
  border:3.5px ridge white;
  border-radius: 310px;
}

.pad {
  width: 300px;
  height: 300px;
  float: left;
  z-index: 1;
  margin: 10px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  opacity: 0.6;
}

.shape1 {
  border-top-left-radius: 300px;
  background-color: green;
  border:2.5px groove white;
  cursor: pointer; cursor: hand; 
  
}

.shape2 {
  float: left;
  border-top-right-radius: 300px;
  background-color: red;
  clear: right;
  border:2.5px groove white;
  position: relative;
  cursor: pointer; cursor: hand; 
}

.shape3 {
  float: left;
  border-bottom-left-radius: 300px;
  background-color: yellow;
  clear: left;
  border:2.5px groove white;
  cursor: pointer; cursor: hand; 
}

.shape4 {
  float: left;
  border-bottom-right-radius: 300px;
  background-color: blue;
  border:2.5px groove white;
  cursor: pointer; cursor: hand; 
}

.Timer {
  position: absolute;
  top: 195px;
  left: 195px;
  width: 250px;
  height: 250px;
  background: #000;
  border-radius: 125px;
  border:2.5px solid White;
  z-index: 10;
  color:white;
}

.TextBox{
  position: absolute;
  width: 200px;
  height:65px;
  text-align:center;
  margin-left:8.9%;
  margin-top:38%
  
}

.level, .score {
  text-align: center;
}

.start {
   border-top: 1px solid #f79797;
   background: #d66565;
   background: -webkit-gradient(linear, left top, left bottom, from(#9c3e3e), to(#d66565));
   background: -webkit-linear-gradient(top, #9c3e3e, #d66565);
   background: -moz-linear-gradient(top, #9c3e3e, #d66565);
   background: -ms-linear-gradient(top, #9c3e3e, #d66565);
   background: -o-linear-gradient(top, #9c3e3e, #d66565);
   padding: 5.5px 11px;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #000000;
   font-size: 14px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.start:hover {
   border-top-color: #2c7828;
   background: #2c7828;
   color: #ccc;
   }
.start:active {
   border-top-color: #1b5c24;
   background: #1b5c24;
   }
<!doctype html>
<html>
<head>

	<link rel="stylesheet" href="Style/Main_Style.css" type="text/css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
	<script src="Mechanics/script.js" type="text/javascript"></script>
	
    <script> 	
	$(document).ready(function(){
    $("#Informationhead").click(function(){
    $("#Information").slideToggle("fast");
    });
    });
    </script>
    <script type="text/javascript">
    window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];
    if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
    </script>
</head>
<body>

<!-- This is the part you add in the html -->
    <br />
	<center><div class="logo"></div></center>
	<br />
<!-- This is were it ends -->
	
	<div class="Informationhead"id="Informationhead"><h3 style="color:white;"><b>Information and Our Goal</b></h3></div>
	<div class="Information"id="Information">
	<h2><i>Welcome to the E-lemon-ators Memory Improver</i></h2>
	<div class="InfoText"><p><b>Better memory will improve your focus, problem solving, and multitasking skills. It will also help to control all kinds of distractions and keep your impulses in check. As little as 5 minutes per day of brain training can yield significant results. Brain training is just like muscle training - the more you train, the better results you get! This game is your perfect memory exerciser it is suitable for kids, students, adults, and seniors!
    Don't be surprised if you do better on your next IQ test or brain age test. These type of games are a scientifically proven way to boost your brain power and health not only that, they also reduce the risk of memory loss (dementia) with older adults.
    The game will help students and business professionals alike - whether it's a client's name or a more polished presentation, or studying for an exam. The results will be quickly noticed.</i></b></p>
	<p><b>We the E-lemon-ators want to help you improve you memory with our game which is designed around the 3 different ways you can retain information, Sight, Sound and Reading. Each user can set there game up they way the want for the best result</b></p>
	</div>
    <p><b>Please Help Us, Help others by spreading our message</b></p>
	<a class="twitter-share-button"
    href="https://twitter.com/share"
    data-url="https://www.E-lemon-ators.com"
    data-text="Getting Better Memory Thanks to The E-lemon-ators Memory Game! Think you can do better,Try beat me?"
    data-count="horizontal">
    </a>
	</div>

	<div class="wrapper">
	<div class="wrapper2">
        <hr>
		<div class="level">
			<h2 style="color:white;">Level: 1</h2>
		</div>
		<div class="score">
			<h2 style="color:white;">Score: 0</h2>
		</div>
		<hr>
		<ul class="difficulty">
		<h4 style="color:white;font-family:Arial;font-weight: 900;font-size:15px;">Choose Your Difficulty</h4>

			<li>
				<input type="radio" class="difOpt" name="difficulty" value="2"><span style="color:white;">Easy</span>
			</li>
			<br />
			<li>
				<input type="radio" class="difOpt" name="difficulty" value="1" checked><span style="color:white;">Normal</span>
			</li>
			<br />
			<li>
				<input type="radio" class="difOpt" name="difficulty" value="0.5"><span style="color:white;">Hard</span>
			</li>
			<br />
			<li>
				<input type="radio" class="difOpt" name="difficulty" value="0.25"><span style="color:white;">Insane</span>
			</li>
		</ul>
		<hr>
		<h4 style="color:white;">Enter Player Name</h4>
		<input type="text" name="PlayerName" placeholder=""style="border :5px groove #8E2B2B; border-radius: 15px;width:155px;height:25px;">
		<hr>
			<center><button class="start"><b><i>START</i></b></button></center>
		
	</div>
	<div class="wrapper3">
	<hr>
	<h3 style="color:white;">Choose Your Game Preferences</h3>
	<hr>
	<h4 style="color:white;">Do You Want Sound ?</h4>
	<input type="checkbox" value="No" id="sound"><span style="color:white;"><b>Yes</b></span>
    <h4 style="color:white;">Do You want Text ?</h4>
    <input type="checkbox" value="No" id="text"><span style="color:white;"><b>Yes</b></span>
	<h4 style="color:white;">Do You want Flashes ?</h4>
    <input type="checkbox" value="No" id="flash" checked><span style="color:white;"><b>Yes</b></span>
	</div>
	

	
		<div class="back">
			<div class="pad shape1" data-pad="1">
				<audio preload="auto" class="sound1">
					<source src="Media/sounds/mp3/sounds_01.mp3" type="audio/mpeg"/>
					<source src="Media/sounds/ogg/sounds_01.ogg" type="audio/ogg"/>
				</audio>
			</div>
			<div class="pad shape2" data-pad="2">
				<audio preload="auto" class="sound2">
					<source src="Media/sounds/mp3/sounds_02.mp3"  type="audio/mpeg"/>
					<source src="Media/sounds/ogg/sounds_02.ogg" type="audio/ogg"/>
				</audio>
			</div>
		    <div class="Timer">
			<br />
			<br />
			<div class="TextBox">
	        <h4 style="color:White;font-family:Arial;font-weight: 900;font-size:14.2px;"><b>If You selected Text, It will Be Here </b></h4>
	        </div>
			<br />
			<br />
            <center><p style="color:White;font-family:Arial;font-weight: 900;font-size:14.2px;"><b>Time starts when you click start</b></p></center> 
			<hr>
			<hr>
			</div>
			<div class="pad shape3" data-pad="3">
				<audio preload="auto" class="sound3">
					<source src="Media/sounds/mp3/sounds_03.mp3" type="audio/mpeg"/>
					<source src="Media/sounds/ogg/sounds_03.ogg" type="audio/ogg"/>
				</audio>
			</div>
			<div class="pad shape4" data-pad="4">
				<audio preload="auto" class="sound4">
					<source src="Media/sounds/mp3/sounds_04.mp3" type="audio/mpeg"/>
					<source src="Media/sounds/ogg/sounds_04.ogg" type="audio/ogg"/>
				</audio>
			</div>

		</div>
	</div>
</body>
</html>



Solution :

First, use click, not mouseup, with buttons.

Then just get the player name and don't start the game if it's blank:

$(document).ready(function () { //document ready

    $('.start').on('click', function () { //initialise a game when the start button is clicked
        var playerName = $.trim($("input[name=PlayerName]").val());
        if (!playerName) {
            // Tell user to fill it in
            // ...
        } else {
            $(this).hide();
            game.difficulty = $('input[name=difficulty]:checked').val();
            $('.difficulty').hide();
            game.init();
        }
    });
});

var game = { //game object
    level: 1, //current level
    turn: 0, //current turn
    difficulty: 1, // user difficulty
    score: 0, //current score
    active: false, //whether a turn is active or not
    handler: false, // whether the click and sound handlers are active
    shape: '.shape', // cached string for the pad class
    genSequence: [], //array containing the generated/randomized pads
    plaSequence: [], //array containing the users pad selections
    colors: ['Green', 'Red', 'Yellow', 'Blue'],
    init: function () { //initialises the game
        if (this.handler === false) { //checks to see if handlers are already active
            this.initPadHandler(); //if not activate them
        }
        this.newGame(); //reset the game defaults

    },

    initPadHandler: function () {

        that = this;

        $('.pad').on('mouseup', function () {

            if (that.active === true) {

                var pad = parseInt($(this).data('pad'), 10);

                that.flash($(this), 1, 300, pad);

                that.logPlayerSequence(pad);

            }
        });

        this.handler = true;

    },

    newGame: function () { //resets the game and generates a starts a new level

        this.level = 1;
        this.score = 0;
        this.newLevel();
        this.displayLevel();
        this.displayScore();

        //initialize timer to 10 seconds (10.0)
        this.timer = 10;

    },

    newLevel: function () {

        this.genSequence.length = 0;
        this.plaSequence.length = 0;
        this.pos = 0;
        this.turn = 0;
        this.active = true;

        this.randomizePad(this.level); //randomize pad with the correct amount of numbers for this level
        this.displaySequence(); //show the user the sequence
    },

    flash: function (element, times, speed, pad) { //function to make the pads appear to flash

        var that = this; //cache this

        if (times > 0) { //make sure we are supposed to flash
            that.playSound(pad); //play the corresponding pad sound
			
			if ($("#flash").is(":checked")) {//Check Box Function
            element.stop().animate({
                opacity: '1'
            }, { //animate the element to appear to flash
                duration: 50,
                complete: function () {
                    element.stop().animate({
                        opacity: '0.6'
                    }, 200);
                }
            }); //end animation

        }
		

        if (times > 0) { //call the flash function again until done the correct amount of times 
            setTimeout(function () {
                that.flash(element, times, speed, pad);
            }, speed);
            times -= 1; //times - 1 for each time it's called
        }
		}
    },
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    playSound: function (clip) { //plays the sound that corresponds to the pad chosen
        if ($("#sound").is(":checked")) {//Check Box Function
            var sound = $('.sound' + clip)[0];
            console.log(sound);
            console.log($('.sound' + clip));
            sound.currentTime = 0; //resets audio position to the start of the clip
            sound.play(); //play the sound
		}
    },

    randomizePad: function (passes) { //generate random numbers and push them to the generated number array iterations determined by current level

        for (i = 0; i < passes; i++) {

            this.genSequence.push(Math.floor(Math.random() * 4) + 1);

        }
    },

    logPlayerSequence: function (pad) { //log the player selected pad to user array and call the checker function

        this.plaSequence.push(pad);
        this.checkSequence(pad);


    },

    checkSequence: function (pad) { //checker function to test if the pad the user pressed was next in the sequence

        that = this;

        if (pad !== this.genSequence[this.turn]) { //if not correct 

            this.incorrectSequence();

        } else { //if correct
            this.keepScore(); //update the score
            this.turn++; //incrememnt the turn

        }

        if (this.turn === this.genSequence.length) { //if completed the whole sequence

            this.level++; //increment level, display it, disable the pads wait 1 second and then reset the game
            this.displayLevel();
            this.active = false;

            // Stop counting when sequence is correct to avoid time running out before starting next level
            clearInterval(this.timerInterval);

            //Add 5.0 seconds each 5th level
            this.timer = 10 + 5 * Math.floor(this.level / 5);

            //Update timerdisplay to show fulltime while displaying next level sequence
            $(".Timer p").html(this.timer);

            setTimeout(function () {
                that.newLevel();
            }, 1000);
        }
    },

    // Countdown and update timer, call incorrectsequence when time's up
    countDown: function () {
        this.timer -= 0.1;
        $(".Timer p").html(this.timer.toFixed(1)); // Display 9.0 instad of 9
        if (this.timer < 0.1) {
            this.incorrectSequence();
        }
    },

    displaySequence: function () { //display the generated sequence to the user

        var that = this;

        var timerCount = 0;

        $.each(this.genSequence, function (index, val) { //iterate over each value in the generated array
            timerCount = index;
            setTimeout(function () {

                that.flash($(that.shape + val), 1, 300, val);
				if ($("#text").is(":checked")) {//Check Box Function
				
                $(".TextBox").children(":first").html('<b>' + (index + 1) + " : " +that.colors[val-1]+'</b>');
				}
            }, 500 * index * that.difficulty); // multiply timeout by how many items in the array so that they play sequentially and multiply by the difficulty modifier
			
        });

        // Wait to start timer until full sequence is displayed
        setTimeout(function () {
            that.timerInterval = setInterval(function () {
                that.countDown()
            }, 100)

            setTimeout(function () {
                $(".TextBox").children(":first").html('');
            }, 500);
        }, 500 * timerCount * that.difficulty);
    },

    displayLevel: function () { //just display the current level on screen

        $('.level h2').text('Level: ' + this.level);

    },

    displayScore: function () { //display current score on screen
        $('.score h2').text('Score: ' + this.score);
    },

    keepScore: function () { //keep the score

        var multiplier = 0;

        switch (this.difficulty) //choose points modifier based on difficulty
        {
            case '2':
                multiplier = 1;
                break;

            case '1':
                multiplier = 2;
                break;

            case '0.5':
                multiplier = 3;
                break;

            case '0.25':
                multiplier = 4;
                break;
        }

        this.score += (1 * multiplier); //work out the score

        this.displayScore(); //display score on screen
    },

    incorrectSequence: function () { //if user makes a mistake	

        //Stop counting down timer and display start message
        clearInterval(this.timerInterval);
        $(".Timer p").html("<b>Game Over</b>");

        var corPad = this.genSequence[this.turn], //cache the pad number that should have been pressed

            that = this;
        this.active = false;
        this.displayLevel();
        this.displayScore();

        setTimeout(function () { //flash the pad 4 times that should have been pressed
            that.flash($(that.shape + corPad), 4, 300, corPad);
        }, 500);

        $(".TextBox").children(":first").html("<b>The Right Answer was  " + that.colors[corPad - 1] + " Try Again </b>");

        $('.start').show(); //enable the start button again and allow difficulty selection again
        $('.difficulty').show();

    }

};
$(document).ready(function () { //document ready

    $('.start').on('click', function () { //initialise a game when the start button is clicked
        var playerName = $.trim($("input[name=PlayerName]").val());
        if (!playerName) {
            // Tell user to fill it in
            // ...
        } else {
            $(this).hide();
            game.difficulty = $('input[name=difficulty]:checked').val();
            $('.difficulty').hide();
            game.init();
        }
    });
});
body {
background-color: #333;
}

input[type="radio"] {
    vertical-align: baseline;
    padding: 10px;
    margin: 10px;
}

li {
  display: inline-block;
}

/* This is the new image part just add in it here  */
.logo{
  position: relative;
  width:350px;
  height:180px;
  background-image: url("GroupLogo1.png");
  background-size:90%;
  background-repeat: no-repeat;
}
/* It ends here  */

.Informationhead{
  position: relative;
  width: 1120px;
  height:50px;
  margin: 0 auto;
  border: 5px groove #8E2B2B;
  border-radius: 15px;
  text-align:center;
  color: black;
  margin-bottom:2.5px;
  cursor: pointer; cursor: hand; 
  font-family: "Arial Black", Arial;
  font-weight: 900;
  font-size: 16px;
}

.Information{
  position: relative;
  width: 1000px;
  height:400px;
  margin: 0 auto;
  display:none;
  text-align:center;
  background-image: url("Info4.png");
  background-size:100%;
  padding-top:45px;
  margin-bottom:10px;
  margin-left:300px:
}

.InfoText{
  position: relative;
  width: 820px;
  margin: 0 auto;
  font-family: "Arial Black", Arial;
  font-weight: 900;
  font-size: 13.5px;
}

.wrapper {
  position: relative;
  width: 900px;
  margin: 0 auto ;
  border: 5px groove #8E2B2B;
  border-radius: 15px;
  padding-left:220px;
  margin-bottom:2.5px;
}


.wrapper2{
  position: absolute;
  width: 165px;
  height:510px;
  margin: 0 auto;
  border: 3.5px groove #8E2B2B;
  border-radius: 15px;
  margin-top:10px;
  padding:5px;
  margin-left: -18%;
  font-family: "Arial Black", Arial;
  font-weight: 900;
  font-size: 15px;
}

.wrapper3{
  position: absolute;
  background-size:100%;
  width: 200px;
  height:380px;
  margin-left: 60%;
  margin-top:10px;
  padding:5px;
  border: 3.5px groove #8E2B2B;
  border-radius: 15px;
  text-align:center;
  font-family: "Arial Black", Arial;
  font-weight: 900;
  font-size: 15.5px;
}


.back {
  position: relative;
  width: 648px;
  height: 648px;
  z-index: 0;
  background-color: #000;
  border:3.5px ridge white;
  border-radius: 310px;
}

.pad {
  width: 300px;
  height: 300px;
  float: left;
  z-index: 1;
  margin: 10px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  opacity: 0.6;
}

.shape1 {
  border-top-left-radius: 300px;
  background-color: green;
  border:2.5px groove white;
  cursor: pointer; cursor: hand; 
  
}

.shape2 {
  float: left;
  border-top-right-radius: 300px;
  background-color: red;
  clear: right;
  border:2.5px groove white;
  position: relative;
  cursor: pointer; cursor: hand; 
}

.shape3 {
  float: left;
  border-bottom-left-radius: 300px;
  background-color: yellow;
  clear: left;
  border:2.5px groove white;
  cursor: pointer; cursor: hand; 
}

.shape4 {
  float: left;
  border-bottom-right-radius: 300px;
  background-color: blue;
  border:2.5px groove white;
  cursor: pointer; cursor: hand; 
}

.Timer {
  position: absolute;
  top: 195px;
  left: 195px;
  width: 250px;
  height: 250px;
  background: #000;
  border-radius: 125px;
  border:2.5px solid White;
  z-index: 10;
  color:white;
}

.TextBox{
  position: absolute;
  width: 200px;
  height:65px;
  text-align:center;
  margin-left:8.9%;
  margin-top:38%
  
}

.level, .score {
  text-align: center;
}

.start {
   border-top: 1px solid #f79797;
   background: #d66565;
   background: -webkit-gradient(linear, left top, left bottom, from(#9c3e3e), to(#d66565));
   background: -webkit-linear-gradient(top, #9c3e3e, #d66565);
   background: -moz-linear-gradient(top, #9c3e3e, #d66565);
   background: -ms-linear-gradient(top, #9c3e3e, #d66565);
   background: -o-linear-gradient(top, #9c3e3e, #d66565);
   padding: 5.5px 11px;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #000000;
   font-size: 14px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.start:hover {
   border-top-color: #2c7828;
   background: #2c7828;
   color: #ccc;
   }
.start:active {
   border-top-color: #1b5c24;
   background: #1b5c24;
   }
<!doctype html>
<html>
<head>

	<link rel="stylesheet" href="Style/Main_Style.css" type="text/css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
	<script src="Mechanics/script.js" type="text/javascript"></script>
	
    <script> 	
	$(document).ready(function(){
    $("#Informationhead").click(function(){
    $("#Information").slideToggle("fast");
    });
    });
    </script>
    <script type="text/javascript">
    window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];
    if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
    </script>
</head>
<body>

<!-- This is the part you add in the html -->
    <br />
	<center><div class="logo"></div></center>
	<br />
<!-- This is were it ends -->
	
	<div class="Informationhead"id="Informationhead"><h3 style="color:white;"><b>Information and Our Goal</b></h3></div>
	<div class="Information"id="Information">
	<h2><i>Welcome to the E-lemon-ators Memory Improver</i></h2>
	<div class="InfoText"><p><b>Better memory will improve your focus, problem solving, and multitasking skills. It will also help to control all kinds of distractions and keep your impulses in check. As little as 5 minutes per day of brain training can yield significant results. Brain training is just like muscle training - the more you train, the better results you get! This game is your perfect memory exerciser it is suitable for kids, students, adults, and seniors!
    Don't be surprised if you do better on your next IQ test or brain age test. These type of games are a scientifically proven way to boost your brain power and health not only that, they also reduce the risk of memory loss (dementia) with older adults.
    The game will help students and business professionals alike - whether it's a client's name or a more polished presentation, or studying for an exam. The results will be quickly noticed.</i></b></p>
	<p><b>We the E-lemon-ators want to help you improve you memory with our game which is designed around the 3 different ways you can retain information, Sight, Sound and Reading. Each user can set there game up they way the want for the best result</b></p>
	</div>
    <p><b>Please Help Us, Help others by spreading our message</b></p>
	<a class="twitter-share-button"
    href="https://twitter.com/share"
    data-url="https://www.E-lemon-ators.com"
    data-text="Getting Better Memory Thanks to The E-lemon-ators Memory Game! Think you can do better,Try beat me?"
    data-count="horizontal">
    </a>
	</div>

	<div class="wrapper">
	<div class="wrapper2">
        <hr>
		<div class="level">
			<h2 style="color:white;">Level: 1</h2>
		</div>
		<div class="score">
			<h2 style="color:white;">Score: 0</h2>
		</div>
		<hr>
		<ul class="difficulty">
		<h4 style="color:white;font-family:Arial;font-weight: 900;font-size:15px;">Choose Your Difficulty</h4>

			<li>
				<input type="radio" class="difOpt" name="difficulty" value="2"><span style="color:white;">Easy</span>
			</li>
			<br />
			<li>
				<input type="radio" class="difOpt" name="difficulty" value="1" checked><span style="color:white;">Normal</span>
			</li>
			<br />
			<li>
				<input type="radio" class="difOpt" name="difficulty" value="0.5"><span style="color:white;">Hard</span>
			</li>
			<br />
			<li>
				<input type="radio" class="difOpt" name="difficulty" value="0.25"><span style="color:white;">Insane</span>
			</li>
		</ul>
		<hr>
		<h4 style="color:white;">Enter Player Name</h4>
		<input type="text" name="PlayerName" placeholder=""style="border :5px groove #8E2B2B; border-radius: 15px;width:155px;height:25px;">
		<hr>
			<center><button class="start"><b><i>START</i></b></button></center>
		
	</div>
	<div class="wrapper3">
	<hr>
	<h3 style="color:white;">Choose Your Game Preferences</h3>
	<hr>
	<h4 style="color:white;">Do You Want Sound ?</h4>
	<input type="checkbox" value="No" id="sound"><span style="color:white;"><b>Yes</b></span>
    <h4 style="color:white;">Do You want Text ?</h4>
    <input type="checkbox" value="No" id="text"><span style="color:white;"><b>Yes</b></span>
	<h4 style="color:white;">Do You want Flashes ?</h4>
    <input type="checkbox" value="No" id="flash" checked><span style="color:white;"><b>Yes</b></span>
	</div>
	

	
		<div class="back">
			<div class="pad shape1" data-pad="1">
				<audio preload="auto" class="sound1">
					<source src="Media/sounds/mp3/sounds_01.mp3" type="audio/mpeg"/>
					<source src="Media/sounds/ogg/sounds_01.ogg" type="audio/ogg"/>
				</audio>
			</div>
			<div class="pad shape2" data-pad="2">
				<audio preload="auto" class="sound2">
					<source src="Media/sounds/mp3/sounds_02.mp3"  type="audio/mpeg"/>
					<source src="Media/sounds/ogg/sounds_02.ogg" type="audio/ogg"/>
				</audio>
			</div>
		    <div class="Timer">
			<br />
			<br />
			<div class="TextBox">
	        <h4 style="color:White;font-family:Arial;font-weight: 900;font-size:14.2px;"><b>If You selected Text, It will Be Here </b></h4>
	        </div>
			<br />
			<br />
            <center><p style="color:White;font-family:Arial;font-weight: 900;font-size:14.2px;"><b>Time starts when you click start</b></p></center> 
			<hr>
			<hr>
			</div>
			<div class="pad shape3" data-pad="3">
				<audio preload="auto" class="sound3">
					<source src="Media/sounds/mp3/sounds_03.mp3" type="audio/mpeg"/>
					<source src="Media/sounds/ogg/sounds_03.ogg" type="audio/ogg"/>
				</audio>
			</div>
			<div class="pad shape4" data-pad="4">
				<audio preload="auto" class="sound4">
					<source src="Media/sounds/mp3/sounds_04.mp3" type="audio/mpeg"/>
					<source src="Media/sounds/ogg/sounds_04.ogg" type="audio/ogg"/>
				</audio>
			</div>

		</div>
	</div>
</body>
</html>


    CSS Howto..

    How to merge css in wordpress

    How to I get this element to span 100% of LI? [closed]

    how to fix menu bar css-adapter stuffs with IE

    Responsive CSS layout - how to stretch the background overlay

    How can I set first element to display: none;?

    How do I float a div to the right of a title div without affecting the content of the title?

    How to use css in extjs to modify the “browse files” button?

    How to write a PHP code that will group students into groups of ten using data from a database? [closed]

    How to add a fade out at the end of this CSS animation?

    How to replace with a
    filled with CSS?

    how to Put a img and text middle of a div

    How to deal with collapsing margins on html & body?

    In GWT, how to reference an external (obfuscated) CSS in another CSS file

    How to force modern Internet Explorer to show proper gradient background in real web sites

    How to center vertically child elements inside div [duplicate]

    jQuery: How to animate height change without known heights?

    How can I highlight position in nav bar for single-page website?

    How to use css image sprites in this code?

    PrimeFaces: how to override CSS class

    How to remove the empty space between divs in CSS?

    How do I avoid using !important?

    How to show all siblings on :hover in pure CSS

    How to place a
    to the right of an input field

    How to change background color of my selector's Pseudo-element on rollover?

    How to style a form element when an input is focused?

    How to set dynamic value in css? [closed]

    How to set two floated divs to be the 100% height of the page

    How do I style a specific select option in HTML

    HTML: How to add an image using CSS as linked style sheet

    Superfish: How to keep sub menu open after it has been clicked