so I am creating a game idea for an assignment, and I wanted to lock the 2nd and 3rd main menu buttons until they have completed the game in order, just to force a little extra structure into how people would use the animation/game, we are using css animation, so everything is on a one page html document and one js file.
here is the HTML code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meltdown</title>
<!-- makes browsers render all elements more consistently. Similar to a CSS reset file -->
<link rel="stylesheet" href="css/normalize.css">
<!-- the main style sheet you should edit -->
<link rel="stylesheet" href="css/style.css">
<!-- link to PT-Sans font from google fonts -->
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<!-- link to local version of jQuery -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Link to javascript file -->
<script src="js/script.js"></script>
<!-- Link to JQuery Library and UI -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<!-- main page wrap for the interactive -->
<div id="main-container">
<!-- container for all the individual pages -->
<div class="pages">
<!-- ========================= INTRO =========================== -->
<div class="page-intro current">
<!--HOME PAGE-->
<div class="home-page">
<div id="home-img"></div>
<div id="volume-slider">
<input type="range" min="0" max="100" value="50" class="slider">
</div>
<!--Trees-->
<div class="tree"></div>
<div class="tree2"></div>
<div class="tree3"></div>
<!--Title-->
<div class="title"></div>
<!--Steam-->
<div class="steam"></div>
<!--Interacables-->
<div class="intro-button">START</div>
<!--Introduction-->
<div class="nuclear-icon"></div>
<div class="nuclear-icon-two"></div>
</div>
</div>
<!-- ========================= MENU =========================== -->
<div class="page-menu">
<h1>Main Menu</h1>
<div class="menu1-button button">
Start study now!
</div>
<div class="menu2-button button" disabled>
Multiple choice!
</div>
<div class="menu3-button button" disabled>
Fix the circuit!
</div>
</div> <!-- menu page -->
<!-- ========================= OTHER PAGES =========================== -->
<div class="page-study">
<h1>Learning the basics</h1>
<div class="p1-button button">
Multiple choice!
</div>
<div class="text-box box1">
<h1>Key points</h1>
<ul>
<li>Circuit diagrams are used to show how electrical <span class="important">components</span> are connected in a <span class="important">circuit.</span></li>
<li>Individual circuit components are represented using circuit symbols.</li>
<li>Ammeters are used to measure the <span class="important">current</span> flowing through components. Voltmeters are used to measure the <span class="important">potential difference</span> across components.</li>
</ul>
</div>
<div class="text-box box2">
<h2>Circuit symbols</h2>
<p>Electrical components, like motors and lamps, can be connected together to form a circuit.</p>
<p>A circuit diagram shows how the components are connected.</p>
<p>straight lines to show the wires andcircuit symbols to represent each component.</p>
</div>
<button class="reveal-more">Click me!</button>
<div class="text-box box3">
<h1>Cells</h1>
<p>Cells provide the energy for many electrical devices to function - like torches, mobile phones and laptops. Cells come in different sizes and shapes.</p>
<p>The most common type of cell is the electrochemical cell which uses chemical reactions to transfer energy.</p>
</div>
<div class="text-box box4">
<h2>Potential Difference</h2>
<p>Potential difference is the amount of energy transferred by each unit of charge passing between two points of a circuit.</p>
<p>The unit of potential difference is the volt. The symbol for volts is V. A potential difference of 1.5 volts can be written as 1.5 V.</p>
<p>Potential difference is also commonly called 'voltage'.</p>
</div>
<button class="continue-button">Next</button>
<div class="p-menu-button button">
Go back to menu
</div>
</div>
<!-- Multiple Choice Page -->
<div class="page-multiple-choice">
<div id="beginning-screen-quiz">
<h1 id="heading-quiz">Oh no! it looks like you have been locked out of the computer system. You will have to take this quiz in order to regain access, you must get a score of 60 in order to bypass the security system.</h1>
<button id="start-button-quiz">Hack into security</button>
</div>
<h1>Multiple Choice Quiz</h1>
<div class="p2-button button">
Fix the circuit
</div>
<div class="p-menu-button button">
Go back to menu
</div>
<div id="wrapper">
<div id="question">Sample question here</div>
<div id="answersAndFeedback">
<div id="answer1" class="answer-box">Answer 1</div>
<div id="answer2" class="answer-box">Answer 2</div>
<div id="answer3" class="answer-box">Answer 3</div>
<div id="feedback" class="hidden">Feedback goes here</div>
</div>
<div class="score">0</div>
<div id="next-btn" class="hidden">next</div>
<div id="game-over" class="hidden">Congratulations! Continue to the next page!</div>
</div>
</div>
<!-- Circuit Page -->
<div class="page-circuit">
<div id="beginning-screen">
<h1 id="heading">Quickly, the reactor has blown a circuit. You are the last chance at saving this power plant, in order to save us all, you have to correctly place all the symbols in the correct slots.</h1>
<button id="start-button">Save the Power Plant</button>
</div>
<h1 id="circuit-text">Fix the circuit</h1>
<div class="p-menu-button button">
Go back to menu
</div>
<div class="container">
<img id="drag1" src="img/voltmeter.svg" alt="Draggable Image 1">
<img id="drag2" src="img/fixed-resistor.svg" alt="Draggable Image 2">
<div id="drop">Drop Here</div>
</div>
<div class="container2">
<img id="drag3" src="img/bulb.svg" alt="Draggable Image 1">
<img id="drag4" src="img/variable-resistor.svg" alt="Draggable Image 2">
<div id="drop2">Drop Here</div>
</div>
<div class="container3">
<img id="drag5" src="img/battery.svg" alt="Draggable Image 1">
<img id="drag6" src="img/closed-switch.svg" alt="Draggable Image 2">
<div id="drop3">Drop Here</div>
</div>
<div class="incomplete-circuit">
</div>
<div id="end-screen">
<h1 id="heading">Congratulations, you have finished, you have saved the power plant from exploding! You are a Hero!</h1>
<button id="back-to-start-button">Back to Start</button>
</div>
</div>
</div> <!-- end of pages -->
<!-- add any containers here that you don't want to animate when pages transition -->
<div class="persistent-stuff">
</div>
</div> <!-- end of main container -->
</body>
</html>
so I wanted <div class="menu2-button button">Multiple choice!</div> to be locked until the person has gone through the work on the <div class="page-study"> and pressed the <div class="p1-button button">Multiple choice!</div>.
then I also wanted the same with <div class="menu3-button button">Fix the circuit!</div> until the button on <div class="page-multiple-choice"> was pressed which is <div class="p2-button button">Fix the circuit</div>.
here are the current functions that are affillated with these elements.
// --------------------------- Menu Page -------------------------------------
$('.menu1-button').click(function(){
transition(".page-study","fade");
});
$('.menu2-button').click(function(){
transition(".page-multiple-choice","fade");
});
$('.menu3-button').click(function(){
transition(".page-circuit","fade");
});
// --------------------------- Study Page -------------------------------------
$('.p1-button').click(function(){
transition(".page-multiple-choice","push-left");
});
$('.p2-button').click(function(){
transition(".page-circuit","push-right");
});
$('.p-menu-button').click(function(){
transition(".page-menu","fade");
});
any help would be greatly appreciated as this is one of the last major things I need to complete in order to finish it 🙂
I tried adding a class to the button of .disabled, which had onclick=false applied to it, and then a class of .enable which had onclick=true on the buttons, but it ended up blocking me from pressing any of the buttons that were on the screens.