├── drawing-board ├── script.js ├── .vscode │ └── settings.json ├── style.css └── index.html ├── logic&wireframe.xlsx ├── README.md ├── JS ├── script.js ├── script2.js ├── script3.js ├── script4.js └── script5.js ├── index.html ├── CSS ├── styleIntroPg.css └── styleGame.css └── Pages └── indexGame.html /drawing-board/script.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /drawing-board/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /logic&wireframe.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisleg19/Profit_Margin_Game/HEAD/logic&wireframe.xlsx -------------------------------------------------------------------------------- /drawing-board/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | .div1{ 8 | display: none; 9 | } 10 | 11 | .div2{ 12 | display: none; 13 | } 14 | 15 | .div3{ 16 | display: none; 17 | } 18 | 19 | fieldset{ 20 | margin: 1rem 21 | } 22 | 23 | .answers{ 24 | margin-top: 10px; 25 | } 26 | 27 | #answerOne:hover + .div1{ 28 | display: block; 29 | border: 1px solid black; 30 | margin: .5rem; 31 | padding: .25rem; 32 | } 33 | 34 | #answerTwo:hover + .div2{ 35 | display: block; 36 | border: 1px solid black; 37 | margin: .5rem; 38 | padding: .25rem; 39 | } 40 | 41 | #answerThree:hover + .div3{ 42 | display: block; 43 | border: 1px solid black; 44 | margin: .5rem; 45 | padding: .25rem; 46 | } 47 | 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | https://www.markdownguide.org/cheat-sheet/ 3 | 4 | # Project 1 5 | 6 | ## Description 7 | This is an educational game for operations managers 8 | 9 | ## Tech Stack 10 | 11 | - JavaScript 12 | - HTML 13 | - CSS 14 | 15 | ## Images from game: 16 | ![alt text](image.jpg) 17 | 18 | 19 | ## Upcoming Features 20 | 21 | - Create ability to record metrics YoY 22 | - Compare metrics to "industry competitors" 23 | - Include more pgs (Intro, Dashboard for each Qtr, Results) and styling 24 | 25 | ## Instructions: 26 | 27 | Hello and welcome to the OPM simulation game. Here you will play the role of an Operations Manager for Widget Inc. Your objective is to manage decisions throughout the year and reach an operating profit margin greater than the previous year. If you succeed there will be a nice bonus waiting for you, but fail, and you'll have a "meeting" with HR. Good Luck! 28 | 29 | ## Resources: 30 | 31 | https://www.youtube.com/embed/JWBTHyVTnfk 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /JS/script.js: -------------------------------------------------------------------------------- 1 | 2 | //Revenue variables: 3 | let annualRev = 7200 4 | let annualRevUnits = 240 5 | let monthRev = annualRev / 12 6 | console.log(`Monthly Revenue Goal: ${monthRev}`) 7 | let monthRevUnits = annualRevUnits / 12 8 | console.log(`Units Sold to meet Monthly Revenue Goal: ${monthRevUnits}`) 9 | //COGS variables: 10 | let rawMatUnits = 25 11 | let pricePerUnit = 30 12 | let finGoodsInv = 5 13 | let finGoodsCost = finGoodsInv * 10 14 | console.log(`Cost of Finished Goods OH: ${finGoodsCost}`) 15 | let finGoodsValue = finGoodsInv * pricePerUnit 16 | console.log(`Value of FIG OH: ${finGoodsValue}`) 17 | let rawMatLeadTime = 5 18 | let eoq = 25 19 | let rawMatPrice = 2 20 | let rawMatDeliveryCost = 10 21 | let rawMatCost = (eoq * rawMatPrice) + rawMatDeliveryCost 22 | console.log(`Cost of raw Material OH: ${rawMatCost}`) 23 | let numOfOpSteps = 5 24 | let costOfOpStep = 2 25 | let numOfOpDays = 5 26 | let costOfOpDay = numOfOpSteps * costOfOpStep 27 | console.log(`Cost of Operations each day: ${costOfOpDay}`) 28 | let costOfOp = numOfOpDays * costOfOpDay 29 | console.log(`Cost of Operations for 1 unit: ${costOfOp}`) 30 | let cogs = null 31 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | OPM Simulation Game 9 | 10 | 11 | 17 | 18 |
19 |
20 |

OPM Simulation Game

21 |
22 | 23 |
24 |

Hello and welcome to the OPM simulation game. Here you will play the role of an Operations Manager for Widget Inc. Your objective is to manage decisions throughout the year and reach an operating profit margin greater than the previous year. If you succeed there will be a nice bonus waiting for you, but fail, and you'll have a "meeting" with HR. Good Luck! 25 |

26 |
27 | 28 |
29 |

Before you begin, watch the video below to refresh yourself on how the operating profit margin is calculated and used. 30 |

31 |
32 |
33 | 34 |
35 |
36 | 37 |
38 |
39 | 40 | -------------------------------------------------------------------------------- /drawing-board/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Drawing Board 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | 24 | QUESTION 1 25 | 26 |
27 | 28 | 29 |
30 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem deleniti laudantium quis saepe dolor repellat laboriosam perspiciatis nemo fuga quo. 31 |
32 |
33 | 34 |
35 | 36 | 37 |
38 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis, reprehenderit facilis sunt quam maxime accusantium eligendi autem deleniti repellat fuga? 39 |
40 |
41 | 42 |
43 | 44 | 45 |
46 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam, illum sint culpa aliquam tempora perspiciatis! Impedit accusamus et perferendis asperiores! 47 |
48 |
49 | 50 |
51 | 52 | 53 |
54 | 55 |
56 | 57 |
58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /CSS/styleIntroPg.css: -------------------------------------------------------------------------------- 1 | /* Intro page */ 2 | *{ 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin:0; 6 | } 7 | 8 | 9 | body{ 10 | display: flex; 11 | justify-content: center; 12 | flex-direction: column; 13 | align-items: center; 14 | max-height: 100vh; 15 | background-color: #FEFBF6; 16 | } 17 | .menu{ 18 | display: flex; 19 | justify-content: space-around; 20 | list-style: none; 21 | margin-top: .5rem; 22 | font-weight: bold; 23 | } 24 | 25 | .menu a{ 26 | text-decoration: none; 27 | } 28 | 29 | .menu a:visited{ 30 | color: black; 31 | } 32 | 33 | .menu a:link{ 34 | color: black; 35 | } 36 | 37 | .menu li{ 38 | border: 2px solid black; 39 | padding: 0 2rem 0 2rem; 40 | background-color: rgb(243, 240, 237); 41 | border-radius: 10px; 42 | box-shadow: .5rem .5rem .5rem black; 43 | } 44 | 45 | li{ 46 | margin-left: 4rem; 47 | margin-right: 4rem; 48 | } 49 | 50 | .container{ 51 | display: flex; 52 | flex-direction: column; 53 | max-width: 600px; 54 | 55 | } 56 | 57 | .titleBox{ 58 | display: flex; 59 | justify-content: center; 60 | margin-top: .5rem; 61 | } 62 | 63 | .welcomeBox{ 64 | display: flex; 65 | justify-content: center; 66 | margin-top: .5rem; 67 | margin-bottom: .5rem; 68 | text-align: center; 69 | } 70 | 71 | .refresherBox{ 72 | display: flex; 73 | justify-content: center; 74 | margin-top: .5rem; 75 | margin-bottom: .5rem; 76 | text-align: center; 77 | } 78 | 79 | .videoBox{ 80 | display: flex; 81 | justify-content: center; 82 | margin-top: 1rem; 83 | margin-bottom: 1rem; 84 | } 85 | 86 | .video{ 87 | height: 18rem; 88 | border-radius: 20px; 89 | box-shadow: 1rem 1rem 1rem ; 90 | } 91 | 92 | .buttonBox{ 93 | display: flex; 94 | justify-content: center; 95 | align-items: center; 96 | } 97 | 98 | button{ 99 | width: 20rem; 100 | height: 4rem; 101 | font-size: 2rem; 102 | font-weight: bolder; 103 | margin-top: 1rem; 104 | padding: none; 105 | border-radius: 20px; 106 | box-shadow: .5rem .5rem .5rem black; 107 | color: white; 108 | background-color: green; 109 | } 110 | /*End of Intro Page */ -------------------------------------------------------------------------------- /JS/script2.js: -------------------------------------------------------------------------------- 1 | 2 | //setting global vars with DOM 3 | let revenue = document.querySelector(".revenueNum") 4 | let cogs = document.querySelector(".cogsNum") 5 | let rawMat = document.querySelector(".rawMatNum") 6 | let freight = document.querySelector(".freightNum") 7 | let factoryLabor = document.querySelector(".factoryLaborNum") 8 | let storage = document.querySelector(".storageNum") 9 | let grossProfit = document.querySelector(".grossProfitNum") 10 | let otherOpCosts = document.querySelector(".otherOpCostsNum") 11 | let indirectLabor = document.querySelector(".indirectLaborNum") 12 | let legal = document.querySelector(".legalNum") 13 | let officeEquip = document.querySelector(".officeEquipNum") 14 | let opProfit = document.querySelector(".opProfitNum") 15 | let opm = document.querySelector(".opmNum") 16 | const scenario1 = document.querySelector(".scenario1") 17 | 18 | //original income statement 19 | let lastYearStatement = { 20 | revenue : 510000, 21 | cogs : 150000, 22 | rawMat : 30000, 23 | freight : 20000, 24 | factoryLabor : 75000, 25 | storage : 25000, 26 | grossProfit : 360000, 27 | otherOpCosts : 300000, 28 | indirectLabor : 150000, 29 | legal : 50000, 30 | officeEquip : 100000, 31 | opProfit : 60000, 32 | opm: 11.76470588235294 33 | } 34 | 35 | //income statement object that changes through out the game 36 | let statement1 = { 37 | revenue : 510000, 38 | cogs : null, 39 | rawMat : 30000, 40 | freight : 20000, 41 | factoryLabor : 75000, 42 | storage : 25000, 43 | grossProfit : null, 44 | otherOpCosts : null, 45 | indirectLabor : 150000, 46 | legal : 50000, 47 | officeEquip : 100000, 48 | opProfit : null, 49 | opm: null, 50 | } 51 | 52 | //filling out values of income statement through DOM 53 | //putting this in a function to reset when selecting different answers 54 | //reset function has a parameter for the statement obj 55 | let reset = (st)=>{ 56 | revenue.textContent = st.revenue 57 | 58 | st.cogs = st.rawMat + st.freight + st.factoryLabor + st.storage 59 | 60 | cogs.textContent = st.cogs 61 | 62 | rawMat.textContent = st.rawMat 63 | 64 | freight.textContent = st.freight 65 | 66 | factoryLabor.textContent = st.factoryLabor 67 | 68 | storage.textContent = st.storage 69 | 70 | st.grossProfit = st.revenue - st.cogs 71 | 72 | grossProfit.textContent = st.grossProfit 73 | 74 | st.otherOpCosts = st.indirectLabor + st.legal + st.officeEquip 75 | 76 | otherOpCosts.textContent = st.otherOpCosts 77 | 78 | indirectLabor.textContent = st.indirectLabor 79 | 80 | legal.textContent = st.legal 81 | 82 | officeEquip.textContent = st.officeEquip 83 | 84 | st.opProfit = st.grossProfit - st.otherOpCosts 85 | 86 | opProfit.textContent = st.opProfit 87 | 88 | st.opm = (st.opProfit / st.revenue) *100 89 | 90 | opm.textContent = st.opm 91 | 92 | } 93 | 94 | reset(statement1) 95 | 96 | //effects of answer A for Question 1 97 | let oneA = (st)=>{ 98 | 99 | st.indirectLabor = (st.indirectLabor *.15) + st.indirectLabor 100 | 101 | revenue.textContent = st.revenue 102 | 103 | st.cogs = st.rawMat + st.freight + st.factoryLabor + st.storage 104 | 105 | cogs.textContent = st.cogs 106 | 107 | rawMat.textContent = st.rawMat 108 | 109 | freight.textContent = st.freight 110 | 111 | factoryLabor.textContent = st.factoryLabor 112 | 113 | storage.textContent = st.storage 114 | 115 | st.grossProfit = st.revenue - st.cogs 116 | 117 | grossProfit.textContent = st.grossProfit 118 | 119 | st.otherOpCosts = st.indirectLabor + st.legal + st.officeEquip 120 | 121 | otherOpCosts.textContent = st.otherOpCosts 122 | 123 | indirectLabor.textContent = st.indirectLabor 124 | 125 | legal.textContent = st.legal 126 | 127 | officeEquip.textContent = st.officeEquip 128 | 129 | st.opProfit = st.grossProfit - st.otherOpCosts 130 | 131 | opProfit.textContent = st.opProfit 132 | 133 | st.opm = (st.opProfit / st.revenue) *100 134 | 135 | opm.textContent = st.opm 136 | 137 | } 138 | 139 | // oneA(statement1) 140 | 141 | 142 | 143 | //effects of answer B for Question 1 144 | let oneB = (st)=>{ 145 | 146 | st.officeEquip = (st.officeEquip *.25) + st.officeEquip 147 | 148 | revenue.textContent = st.revenue 149 | 150 | st.cogs = st.rawMat + st.freight + st.factoryLabor + st.storage 151 | 152 | cogs.textContent = st.cogs 153 | 154 | rawMat.textContent = st.rawMat 155 | 156 | freight.textContent = st.freight 157 | 158 | factoryLabor.textContent = st.factoryLabor 159 | 160 | storage.textContent = st.storage 161 | 162 | st.grossProfit = st.revenue - st.cogs 163 | 164 | grossProfit.textContent = st.grossProfit 165 | 166 | st.otherOpCosts = st.indirectLabor + st.legal + st.officeEquip 167 | 168 | otherOpCosts.textContent = st.otherOpCosts 169 | 170 | indirectLabor.textContent = st.indirectLabor 171 | 172 | legal.textContent = st.legal 173 | 174 | officeEquip.textContent = st.officeEquip 175 | 176 | st.opProfit = st.grossProfit - st.otherOpCosts 177 | 178 | opProfit.textContent = st.opProfit 179 | 180 | st.opm = (st.opProfit / st.revenue) *100 181 | 182 | opm.textContent = st.opm 183 | } 184 | 185 | // oneB() 186 | 187 | //effects of answer C for Question 1 188 | let oneC = (st)=>{ 189 | 190 | st.storage = (st.storage *.50) + st.storage 191 | 192 | st.indirectLabor = st.indirectLabor - (st.indirectLabor * .10) 193 | 194 | revenue.textContent = st.revenue 195 | 196 | st.cogs = st.rawMat + st.freight + st.factoryLabor + st.storage 197 | 198 | cogs.textContent = st.cogs 199 | 200 | rawMat.textContent = st.rawMat 201 | 202 | freight.textContent = st.freight 203 | 204 | factoryLabor.textContent = st.factoryLabor 205 | 206 | storage.textContent = st.storage 207 | 208 | st.grossProfit = st.revenue - st.cogs 209 | 210 | grossProfit.textContent = st.grossProfit 211 | 212 | st.otherOpCosts = st.indirectLabor + st.legal + st.officeEquip 213 | 214 | otherOpCosts.textContent = st.otherOpCosts 215 | 216 | indirectLabor.textContent = st.indirectLabor 217 | 218 | legal.textContent = st.legal 219 | 220 | officeEquip.textContent = st.officeEquip 221 | 222 | st.opProfit = st.grossProfit - st.otherOpCosts 223 | 224 | opProfit.textContent = st.opProfit 225 | 226 | st.opm = (st.opProfit / st.revenue) *100 227 | 228 | opm.textContent = st.opm 229 | } 230 | 231 | 232 | // oneC() 233 | 234 | //*EVENTLISTENER FOR SUBMIT BUTTON=================== 235 | 236 | scenario1.addEventListener("submit", (e)=>{ 237 | e.preventDefault() 238 | // console.log("submit works") 239 | for (let ans = 0; ans<3; ans++){ 240 | if(scenario1.issue1[ans].checked) 241 | break; 242 | } 243 | console.log(scenario1.issue1.value) 244 | if (scenario1.issue1.value === "1A"){ 245 | 246 | oneA() 247 | } else if(scenario1.issue1.value === "1B"){ 248 | 249 | oneB() 250 | } else if (scenario1.issue1.value === "1C"){ 251 | 252 | oneC() 253 | } 254 | }) 255 | 256 | 257 | 258 | // scenario1.addEventListener("submit", (e)=>{ 259 | // e.preventDefault() 260 | // let answer = new FormData(scenario1) 261 | // let output = ""; 262 | // console.log(answer) 263 | // for(let entry of answer){ 264 | // output= `` 265 | // } 266 | 267 | // }) 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | // let reset = ()=>{ 276 | // revenue.textContent = 510000 277 | // cogs.textContent = 150000 278 | // rawMat.textContent = 30000 279 | // freight.textContent = 20000 280 | // factoryLabor.textContent = 75000 281 | // storage.textContent = 25000 282 | // grossProfit.textContent = 360000 283 | // otherOpCosts.textContent = 300000 284 | // indirectLabor.textContent = 150000 285 | // legal.textContent = 50000 286 | // officeEquip.textContent = 100000 287 | // opProfit.textContent = 60000 288 | 289 | // opm.textContent = (opProfit.textContent/revenue.textContent)*100 290 | // } 291 | 292 | 293 | 294 | //Create objects with values. Pull & update object values 295 | 296 | 297 | //create multiple objects for statements between each scenario. The results from each scenario will be pushed into the corresponding object. 298 | //there will be a "clear" button to reset the object for statement if a new answer needs to be selected 299 | //each object between scenarios will show the effects of each decision made 300 | 301 | //maybe try this with classes 302 | 303 | 304 | -------------------------------------------------------------------------------- /CSS/styleGame.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin:0; 5 | } 6 | 7 | body{ 8 | width: 100%; 9 | height: 100%; 10 | background-color: #FEFBF6; 11 | } 12 | 13 | 14 | .menu{ 15 | display: flex; 16 | justify-content:center; 17 | list-style: none; 18 | margin-top: .5rem; 19 | font-weight: bold; 20 | 21 | } 22 | 23 | .menu a{ 24 | text-decoration: none; 25 | } 26 | 27 | .menu a:visited{ 28 | color: black; 29 | } 30 | 31 | .menu a:link{ 32 | color: black; 33 | } 34 | 35 | .menu li{ 36 | border: 2px solid black; 37 | padding: 0 2rem 0 2rem; 38 | background-color: rgb(243, 240, 237); 39 | border-radius: 10px; 40 | box-shadow: .5rem .5rem .5rem black; 41 | margin: 0 1rem 0 1rem; 42 | } 43 | 44 | .header{ 45 | margin: 1rem 0 .5rem 0 46 | } 47 | 48 | .breakdown{ 49 | margin-left: 1rem; 50 | } 51 | 52 | .incomeStatement{ 53 | display: grid; 54 | grid-template-areas: 55 | "header header" 56 | "revenue revenueNum" 57 | "cogs cogsNum" 58 | "rawMat rawMatNum" 59 | "freight freightNum" 60 | "factoryLabor factoryLaborNum" 61 | "storage storageNum" 62 | "grossProfit grossProfitNum" 63 | "otherOpCosts otherOpCostsNum" 64 | "indirectLabor indirectLaborNum" 65 | "legal legalNum" 66 | "officeEquip officeEquipNum" 67 | "opProfit opProfitNum"; 68 | justify-content: center; 69 | background-color: #EEEEEE; 70 | overflow: hidden; 71 | } 72 | 73 | 74 | 75 | .wrapper{ 76 | border: 2px solid black; 77 | height: 310px; 78 | margin-top: 8px; 79 | width: 500px; 80 | margin: 10px auto ; 81 | border-radius: 10px; 82 | box-shadow: .5rem .5rem .5rem black; 83 | overflow: hidden; 84 | ; 85 | 86 | 87 | } 88 | 89 | .header{ 90 | grid-area: header; 91 | } 92 | 93 | .revenue{ 94 | grid-area: revenue; 95 | } 96 | .revenueNum{ 97 | grid-area: revenueNum; 98 | } 99 | .cogs{ 100 | grid-area: cogs; 101 | } 102 | .cogsNum{ 103 | grid-area: cogsNum; 104 | } 105 | .rawMat{ 106 | grid-area: rawMat; 107 | } 108 | .rawMatNum{ 109 | grid-area: rawMatNum; 110 | } 111 | .freight{ 112 | grid-area: freight; 113 | } 114 | .freightNum{ 115 | grid-area: freightNum; 116 | } 117 | .factoryLabor{ 118 | grid-area: factoryLabor; 119 | } 120 | .factoryLaborNum{ 121 | grid-area: factoryLaborNum; 122 | } 123 | 124 | .storage{ 125 | grid-area: storage; 126 | } 127 | .storageNum{ 128 | grid-area: storageNum; 129 | } 130 | .grossProfit{ 131 | grid-area: grossProfit; 132 | } 133 | .grossProfitNum{ 134 | grid-area: grossProfitNum; 135 | } 136 | .otherOpCosts{ 137 | grid-area: otherOpCosts; 138 | } 139 | .otherOpCostsNum{ 140 | grid-area: otherOpCostsNum; 141 | } 142 | .indirectLabor{ 143 | grid-area: indirectLabor; 144 | } 145 | .indirectLaborNum{ 146 | grid-area: indirectLaborNum; 147 | } 148 | .legal{ 149 | grid-area: legal; 150 | } 151 | .legalNum{ 152 | grid-area: legalNum; 153 | } 154 | .officeEquip{ 155 | grid-area: officeEquip; 156 | } 157 | .officeEquipNum{ 158 | grid-area: officeEquipNum; 159 | } 160 | .opProfit{ 161 | grid-area: opProfit; 162 | } 163 | .opProfitNum{ 164 | grid-area: opProfitNum; 165 | } 166 | 167 | .score{ 168 | display: grid; 169 | grid-template-areas: 170 | "opm opmNum"; 171 | justify-content: center; 172 | padding:.5rem 0 .5rem 0; 173 | /* margin: .5rem 0 .5rem 0; */ 174 | background-color: #EEEEEE; 175 | overflow: hidden; 176 | 177 | } 178 | 179 | .opm{ 180 | grid-area: opm; 181 | margin-right: 3rem; 182 | } 183 | .opmNum{ 184 | grid-area: opmNum; 185 | margin-right: 2rem; 186 | margin-bottom: none; 187 | } 188 | 189 | .bottom{ 190 | display: flex; 191 | flex-wrap: wrap; 192 | /* flex-direction: column; */ 193 | justify-content: center; 194 | align-items: center; 195 | } 196 | 197 | .scenario1{ 198 | display: flex; 199 | margin-left: 1rem; 200 | margin-bottom: 1rem; 201 | } 202 | 203 | fieldset{ 204 | display:flex; 205 | flex-direction: column; 206 | list-style: none; 207 | width: 500px; 208 | line-height: 1.75rem; 209 | box-shadow: .5rem .5rem .5rem black; 210 | margin-top: none; 211 | background-color: #EEEEEE; 212 | } 213 | 214 | .options{ 215 | display: inline-block; 216 | list-style: none; 217 | } 218 | 219 | .firstSet{ 220 | float: left; 221 | margin-top: .4rem; 222 | margin-right: .25rem; 223 | margin-left: .5rem; 224 | 225 | } 226 | .firstSetA{ 227 | display: block; 228 | } 229 | 230 | /* Copy format of section below for remaining scenarios */ 231 | 232 | .details1A{ 233 | display: none; 234 | } 235 | 236 | #oneApSpan{ 237 | font-weight: bold; 238 | } 239 | 240 | #answer1A:hover + .details1A{ 241 | display: block; 242 | border: 1px solid black; 243 | margin: .5rem; 244 | padding: .25rem; 245 | background-color: lightblue; 246 | } 247 | 248 | .details1B{ 249 | display: none; 250 | } 251 | 252 | #oneBpSpan{ 253 | font-weight: bold; 254 | } 255 | 256 | #answer1B:hover + .details1B{ 257 | display: block; 258 | border: 1px solid black; 259 | margin: .5rem; 260 | padding: .25rem; 261 | background-color: lightcoral; 262 | } 263 | 264 | .details1C{ 265 | display: none; 266 | } 267 | 268 | #oneCpSpan{ 269 | font-weight: bold; 270 | } 271 | 272 | #answer1C:hover + .details1C{ 273 | display: block; 274 | border: 1px solid black; 275 | margin: .5rem; 276 | padding: .25rem; 277 | background-color: lightblue; 278 | } 279 | 280 | .details2A{ 281 | display: none; 282 | } 283 | 284 | #twoApSpan{ 285 | font-weight: bold; 286 | } 287 | 288 | #answer2A:hover + .details2A{ 289 | display: block; 290 | border: 1px solid black; 291 | margin: .5rem; 292 | padding: .25rem; 293 | background-color: lightcoral; 294 | } 295 | 296 | .details2B{ 297 | display: none; 298 | } 299 | 300 | #twoBpSpan{ 301 | font-weight: bold; 302 | } 303 | 304 | #answer2B:hover + .details2B{ 305 | display: block; 306 | border: 1px solid black; 307 | margin: .5rem; 308 | padding: .25rem; 309 | background-color: lightblue; 310 | } 311 | 312 | .details2C{ 313 | display: none; 314 | } 315 | 316 | #twoCpSpan{ 317 | font-weight: bold; 318 | } 319 | 320 | #answer2C:hover + .details2C{ 321 | display: block; 322 | border: 1px solid black; 323 | margin: .5rem; 324 | padding: .25rem; 325 | background-color: lightcoral; 326 | } 327 | 328 | 329 | .details3A{ 330 | display: none; 331 | } 332 | 333 | #threeApSpan{ 334 | font-weight: bold; 335 | } 336 | 337 | #answer3A:hover + .details3A{ 338 | display: block; 339 | border: 1px solid black; 340 | margin: .5rem; 341 | padding: .25rem; 342 | background-color: lightblue; 343 | } 344 | 345 | .details3B{ 346 | display: none; 347 | } 348 | 349 | #threeBpSpan{ 350 | font-weight: bold; 351 | } 352 | 353 | #answer3B:hover + .details3B{ 354 | display: block; 355 | border: 1px solid black; 356 | margin: .5rem; 357 | padding: .25rem; 358 | background-color: lightcoral; 359 | } 360 | 361 | .details3C{ 362 | display: none; 363 | } 364 | 365 | #threeCpSpan{ 366 | font-weight: bold; 367 | } 368 | 369 | #answer3C:hover + .details3C{ 370 | display: block; 371 | border: 1px solid black; 372 | margin: .5rem; 373 | padding: .25rem; 374 | background-color: lightblue; 375 | } 376 | 377 | 378 | .details4A{ 379 | display: none; 380 | } 381 | 382 | #fourApSpan{ 383 | font-weight: bold; 384 | } 385 | 386 | #answer4A:hover + .details4A{ 387 | display: block; 388 | border: 1px solid black; 389 | margin: .5rem; 390 | padding: .25rem; 391 | background-color: lightcoral; 392 | } 393 | 394 | .details4B{ 395 | display: none; 396 | } 397 | 398 | #fourBpSpan{ 399 | font-weight: bold; 400 | } 401 | 402 | #answer4B:hover + .details4B{ 403 | display: block; 404 | border: 1px solid black; 405 | margin: .5rem; 406 | padding: .25rem; 407 | background-color: lightblue; 408 | } 409 | 410 | .details4C{ 411 | display: none; 412 | } 413 | 414 | #fourCpSpan{ 415 | font-weight: bold; 416 | } 417 | 418 | #answer4C:hover + .details4C{ 419 | display: block; 420 | border: 1px solid black; 421 | margin: .5rem; 422 | padding: .25rem; 423 | background-color: lightcoral; 424 | } 425 | 426 | 427 | /* Copy CSS format above for remaining scenarios */ 428 | 429 | 430 | .scenario2{ 431 | display: flex; 432 | margin-left: 1rem; 433 | margin-bottom: 1rem; 434 | } 435 | 436 | .scenario3{ 437 | display: flex; 438 | margin-left: 1rem; 439 | margin-bottom: 1rem; 440 | } 441 | 442 | .scenario4{ 443 | display: flex; 444 | margin-left: 1rem; 445 | margin-bottom: 1rem; 446 | } 447 | 448 | .firstSetA{ 449 | margin-right: 1rem; 450 | } 451 | 452 | legend{ 453 | font-weight: bolder; 454 | } 455 | 456 | .reset{ 457 | display: flex; 458 | justify-content: center; 459 | } 460 | 461 | .reset > button{ 462 | padding:0 1rem 0 1rem; 463 | font-size: 1rem; 464 | font-weight: bold; 465 | background-color: #F15412; 466 | color: white; 467 | border-radius: 10px; 468 | box-shadow: .5rem .5rem .5rem black; 469 | } 470 | 471 | .scenarioBtns{ 472 | display: flex; 473 | justify-content: space-around; 474 | margin-top: .25rem; 475 | margin-bottom: .25rem; 476 | 477 | } 478 | 479 | .scenarioBtns > button{ 480 | font-size: .75rem; 481 | font-weight: bold; 482 | padding: 0 .5rem 0 .5rem; 483 | background-color: #34B3F1; 484 | border-radius: 10px; 485 | } 486 | 487 | .previous{ 488 | display: inline; 489 | padding-top: 2rem; 490 | text-align: center; 491 | } 492 | 493 | .previous h1{ 494 | margin-top: 2rem; 495 | } -------------------------------------------------------------------------------- /Pages/indexGame.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Operating Profit Margin Game 10 | 11 | 12 | 13 | 14 | 20 |
21 |
22 |

Widget Inc. Income Statement

23 | 24 |

Revenue

25 |
0
26 | 27 |

COGS

28 |
0
29 | 30 |

Raw Materials

31 |
0
32 | 33 |

Freight

34 |
0
35 | 36 |

Factory Labor

37 |
0
38 | 39 |

Storage

40 |
0
41 | 42 |

Gross Profit

43 |
0
44 | 45 |

Other Operating Costs

46 |
0
47 | 48 |

Indirect Labor

49 |
0
50 | 51 |

Legal

52 |
0
53 | 54 |

Office Equipment

55 |
0
56 | 57 |

Operating Profit

58 |
0
59 | 60 |
61 |
62 |

Operating Profit Margin

63 |

0

64 |
65 |
66 |
67 |
68 | 69 | 70 | 71 |
72 | 73 | Q1: Inventory shrinkage due to poor management. 74 |
75 | 76 | 77 | 78 | 79 |

Increasing cycle counts will increase the labor hours for your warehouse staff, and possibly require additional staff. This will result in a 15% increase to your indirect labor.

80 | 81 | 82 | 83 | 84 |

Improving your inventory management requires new hardware and software throughout the company, which will result in a 25% increase in office equipment costs.

85 | 86 | 87 | 88 | 89 |

Outsourcing your inventory management will increase your cost of storage by 50%. However this also decreases the workload of your warehouse personnel, resulting in a 10% decrease to indirect labor. 90 | 91 | 92 | 93 |

94 |
95 | 96 | 97 | 98 |
99 |
100 |
101 | 102 |
103 | 104 |
105 | 106 | Q2: Supplier increases cost of raw materials. 107 |
108 | 109 | 110 | 111 | 112 |

Finding a new supplier will eliminate the discounts established with your current supplier, resulting in a 25% increase in the cost of raw materials. 113 |

114 | 115 | 116 | 117 | 118 |

Negotiating a new economic order quantity (EOQ) with your supplier will allow you to keep your current discount, but increases the required order quantity. But you are also able to negotiate a release option with your supplier, and only receive the quantity needed based on your demand. This reduces your storage costs by 10%.

119 | 120 | 121 | 122 | 123 |

You are able to adjust your production schedule to meet your supplier's transportation schedule and negotiate delivery to be included with the cost of material. This reduces your cost of freight by 10%.

124 | 125 |
126 |
127 | 128 | 129 | 130 |
131 |
132 |
133 | 134 |
135 |
136 | 137 | Q3: Freight costs rise due to increase in fuel price. 138 |
139 | 140 | 141 | 142 | 143 |

Negotiating delivery to be covered by your supplier will increase the cost of raw material by 30%, but your transportation costs will decrease by 75%.

144 | 145 | 146 | 147 | 148 |

The return on this investment may take a while. In the mean time your equipment costs will increase by 20%, but your freight costs will decrease by 10%.

149 | 150 | 151 | 152 | 153 |

Hiring someone to find the best freight deal for each delivery will reduce your freight costs by 5%, but it will also increase your indirect labor by 10%.

154 | 155 |
156 |
157 | 158 | 159 | 160 |
161 |
162 |
163 | 164 |
165 |
166 | Q4: Employees' quality of work decrease, causing an increase in rework. 167 |
168 | 169 | 170 | 171 | 172 |

Improving your training for employees reduces rework, resulting in a decrease in factory labor by 10%. However the additional training provided by your supervisors and managers increases the indirect labor by 5%.

173 | 174 | 175 | 176 | 177 |

Raising the hiring standard for factory employees reduces some of the rework, but hiring better qualified employees increases your factory labor costs by 5%.

178 | 179 | 180 | 181 | 182 |

Developing a team around quality control helps with catching defects and implementing preventive measures. This eliminates some rework and reduces factory labor costs by 10%; however your indirect labor costs increase by 10% because of the new quality control team.

183 | 184 |
185 |
186 | 187 | 188 | 189 |
190 |
191 |
192 |
193 |
194 | 195 |
196 | 197 | 198 | 199 | -------------------------------------------------------------------------------- /JS/script3.js: -------------------------------------------------------------------------------- 1 | 2 | //setting global vars 3 | let revenue = document.querySelector(".revenueNum") 4 | let cogs = document.querySelector(".cogsNum") 5 | let rawMat = document.querySelector(".rawMatNum") 6 | let freight = document.querySelector(".freightNum") 7 | let factoryLabor = document.querySelector(".factoryLaborNum") 8 | let storage = document.querySelector(".storageNum") 9 | let grossProfit = document.querySelector(".grossProfitNum") 10 | let otherOpCosts = document.querySelector(".otherOpCostsNum") 11 | let indirectLabor = document.querySelector(".indirectLaborNum") 12 | let legal = document.querySelector(".legalNum") 13 | let officeEquip = document.querySelector(".officeEquipNum") 14 | let opProfit = document.querySelector(".opProfitNum") 15 | let opm = document.querySelector(".opmNum") 16 | let statementStart 17 | let statementOne 18 | let statementTwo 19 | let statementThree 20 | let statementFour 21 | let statementFive 22 | let statementSix 23 | let statementSeven 24 | let statementEight 25 | let statementNine 26 | let statementTen 27 | let statementEleven 28 | let statementTwelve 29 | let statementThirteen 30 | let statementFourteen 31 | let statementFifteen 32 | let statementSixteen 33 | let clear1 = document.querySelector("#clear1") 34 | let next1 = document.querySelector("#next1") 35 | let clear2 = document.querySelector("#clear2") 36 | let next2 = document.querySelector("#next2") 37 | let clear3 = document.querySelector("#clear3") 38 | let next3 = document.querySelector("#next3") 39 | let clear4 = document.querySelector("#clear4") 40 | let finish = document.querySelector("#finish") 41 | const scenario1 = document.querySelector(".scenario1") 42 | const scenario2 = document.querySelector(".scenario2") 43 | const scenario3 = document.querySelector(".scenario3") 44 | const scenario4 = document.querySelector(".scenario4") 45 | let arr1 = [] 46 | let arr2 = [] 47 | let arr3 = [] 48 | let arr4 = [] 49 | let scenario2AArr = [] 50 | 51 | //prototype class 52 | class masterIncomeStatement{ 53 | constructor( 54 | revenue, 55 | cogs, 56 | rawMat, 57 | freight, 58 | factoryLabor, 59 | storage, 60 | grossProfit, 61 | otherOpCosts, 62 | indirectLabor, 63 | legal, 64 | officeEquip, 65 | opProfit, 66 | opm 67 | ){ 68 | 69 | this.revenue = revenue; 70 | this.cogs = cogs; 71 | this.rawMat = rawMat; 72 | this.freight = freight; 73 | this.factoryLabor = factoryLabor; 74 | this.storage = storage; 75 | this.grossProfit = grossProfit; 76 | this.otherOpCosts = otherOpCosts; 77 | this.indirectLabor = indirectLabor; 78 | this.legal = legal; 79 | this.officeEquip = officeEquip; 80 | this.opProfit = opProfit; 81 | this.opm = opm; 82 | } 83 | 84 | //function to display income statement numbers 85 | show(statement){ 86 | revenue.textContent = statement.revenue 87 | 88 | statement.cogs = statement.rawMat + statement.freight + statement.factoryLabor + statement.storage 89 | 90 | cogs.textContent = statement.cogs 91 | 92 | rawMat.textContent = statement.rawMat 93 | 94 | freight.textContent = statement.freight 95 | 96 | factoryLabor.textContent = statement.factoryLabor 97 | 98 | storage.textContent = statement.storage 99 | 100 | statement.grossProfit = statement.revenue - statement.cogs 101 | 102 | grossProfit.textContent = statement.grossProfit 103 | 104 | statement.otherOpCosts = statement.indirectLabor + statement.legal + statement.officeEquip 105 | 106 | otherOpCosts.textContent = statement.otherOpCosts 107 | 108 | indirectLabor.textContent = statement.indirectLabor 109 | 110 | legal.textContent = statement.legal 111 | 112 | officeEquip.textContent = statement.officeEquip 113 | 114 | statement.opProfit = statement.grossProfit - statement.otherOpCosts 115 | 116 | opProfit.textContent = statement.opProfit 117 | 118 | statement.opm = (statement.opProfit / statement.revenue) *100 119 | 120 | opm.textContent = statement.opm 121 | } 122 | } 123 | // 124 | //// show2A(statement){ 125 | // 126 | //// statement.rawMat = (statement.rawMat * .20) + statement.rawMat 127 | // 128 | //// revenue.textContent = statement.revenue 129 | // 130 | //// statement.cogs = statement.rawMat + statement.freight + statement.factoryLabor + statement.storage 131 | // 132 | //// cogs.textContent = statement.cogs 133 | // 134 | //// rawMat.textContent = statement.rawMat 135 | // 136 | //// freight.textContent = statement.freight 137 | // 138 | //// factoryLabor.textContent = statement.factoryLabor 139 | // 140 | //// storage.textContent = statement.storage 141 | // 142 | //// statement.grossProfit = statement.revenue - statement.cogs 143 | // 144 | //// grossProfit.textContent = statement.grossProfit 145 | // 146 | //// statement.otherOpCosts = statement.indirectLabor + statement.legal + statement.officeEquip 147 | // 148 | //// otherOpCosts.textContent = statement.otherOpCosts 149 | // 150 | //// indirectLabor.textContent = statement.indirectLabor 151 | // 152 | //// legal.textContent = statement.legal 153 | // 154 | //// officeEquip.textContent = statement.officeEquip 155 | // 156 | //// statement.opProfit = statement.grossProfit - statement.otherOpCosts 157 | // 158 | //// opProfit.textContent = statement.opProfit 159 | // 160 | //// statement.opm = (statement.opProfit / statement.revenue) *100 161 | // 162 | //// opm.textContent = statement.opm 163 | //// } 164 | // 165 | 166 | // class masterIncomeStatement2 extends masterIncomeStatement { 167 | // constructor( 168 | // revenue, 169 | // cogs, 170 | // rawMat, 171 | // freight, 172 | // factoryLabor, 173 | // storage, 174 | // grossProfit, 175 | // otherOpCosts, 176 | // indirectLabor, 177 | // legal, 178 | // officeEquip, 179 | // opProfit, 180 | // opm 181 | // ){ 182 | // super( 183 | // revenue, 184 | // cogs, 185 | // rawMat, 186 | // freight, 187 | // factoryLabor, 188 | // storage, 189 | // grossProfit, 190 | // otherOpCosts, 191 | // indirectLabor, 192 | // legal, 193 | // officeEquip, 194 | // opProfit, 195 | // opm 196 | // ); 197 | // this.revenue = revenue; 198 | // this.cogs = cogs; 199 | // this.rawMat = rawMat; 200 | // this.freight = freight; 201 | // this.factoryLabor = factoryLabor; 202 | // this.storage = storage; 203 | // this.grossProfit = grossProfit; 204 | // this.otherOpCosts = otherOpCosts; 205 | // this.indirectLabor = indirectLabor; 206 | // this.legal = legal; 207 | // this.officeEquip = officeEquip; 208 | // this.opProfit = opProfit; 209 | // this.opm = opm; 210 | // } 211 | 212 | // } 213 | 214 | 215 | 216 | 217 | 218 | // function to set current statement values to the next scenario income statement 219 | 220 | // setStatementValues(statement){ 221 | // // statement.revenue = revenue; 222 | // // this.cogs = cogs; 223 | // // this.rawMat = rawMat; 224 | // // this.freight = freight; 225 | // // this.factoryLabor = factoryLabor; 226 | // // this.storage = storage; 227 | // // this.grossProfit = grossProfit; 228 | // // this.otherOpCosts = otherOpCosts; 229 | // // this.indirectLabor = indirectLabor; 230 | // // this.legal = legal; 231 | // // this.officeEquip = officeEquip; 232 | // // this.opProfit = opProfit; 233 | // // this.opm = opm; 234 | // } 235 | 236 | 237 | statementStart = new masterIncomeStatement( 238 | 510000, 239 | null, 240 | 30000, 241 | 20000, 242 | 75000, 243 | 25000, 244 | null, 245 | null, 246 | 150000, 247 | 50000, 248 | 100000, 249 | null, 250 | null 251 | ) 252 | 253 | statementOne = new masterIncomeStatement( 254 | 510000, 255 | null, 256 | 30000, 257 | 20000, 258 | 75000, 259 | 25000, 260 | null, 261 | null, 262 | 172500, 263 | 50000, 264 | 100000, 265 | null, 266 | null 267 | ) 268 | 269 | statementTwo = new masterIncomeStatement( 270 | 510000, 271 | null, 272 | 30000, 273 | 20000, 274 | 75000, 275 | 25000, 276 | null, 277 | null, 278 | 150000, 279 | 50000, 280 | 125000, 281 | null, 282 | null 283 | ) 284 | 285 | statementThree = new masterIncomeStatement( 286 | 510000, 287 | null, 288 | 30000, 289 | 20000, 290 | 75000, 291 | 37500, 292 | null, 293 | null, 294 | 135000, 295 | 50000, 296 | 100000, 297 | null, 298 | null 299 | ) 300 | 301 | statementFour = new masterIncomeStatement( 302 | revenue, 303 | cogs, 304 | rawMat, 305 | freight, 306 | factoryLabor, 307 | storage, 308 | grossProfit, 309 | otherOpCosts, 310 | indirectLabor, 311 | legal, 312 | officeEquip, 313 | opProfit, 314 | opm 315 | ) 316 | 317 | 318 | // statementFive = new masterIncomeStatement() 319 | statementFive = arr1 320 | 321 | statementSix = arr1 322 | 323 | statementSeven = arr1 324 | 325 | statementEight = new masterIncomeStatement( 326 | revenue, 327 | cogs, 328 | rawMat, 329 | freight, 330 | factoryLabor, 331 | storage, 332 | grossProfit, 333 | otherOpCosts, 334 | indirectLabor, 335 | legal, 336 | officeEquip, 337 | opProfit, 338 | opm 339 | ) 340 | 341 | statementNine = arr2 342 | 343 | statementTen = arr2 344 | 345 | statementEleven = arr2 346 | 347 | statementTwelve = new masterIncomeStatement( 348 | revenue, 349 | cogs, 350 | rawMat, 351 | freight, 352 | factoryLabor, 353 | storage, 354 | grossProfit, 355 | otherOpCosts, 356 | indirectLabor, 357 | legal, 358 | officeEquip, 359 | opProfit, 360 | opm 361 | ) 362 | 363 | statementThirteen = arr3 364 | 365 | statementFourteen = arr3 366 | 367 | statementFifteen = arr3 368 | 369 | statementSixteen = new masterIncomeStatement( 370 | revenue, 371 | cogs, 372 | rawMat, 373 | freight, 374 | factoryLabor, 375 | storage, 376 | grossProfit, 377 | otherOpCosts, 378 | indirectLabor, 379 | legal, 380 | officeEquip, 381 | opProfit, 382 | opm 383 | ) 384 | 385 | statementStart.show(statementStart) 386 | 387 | scenario1.addEventListener("submit", (e)=>{ 388 | e.preventDefault() 389 | console.log("submit works") 390 | // for (let ans = 0; ans<3; ans++){ 391 | // if(scenario1.issue1[ans].checked){ 392 | // break; 393 | // } 394 | // } 395 | // console.log(scenario1.issue1.value) 396 | if (scenario1.issue1.value === "1A"){ 397 | console.log(scenario1.issue1.value) 398 | statementOne.show(statementOne) 399 | 400 | arr1.push(statementOne) 401 | statementFour.revenue = arr1[0].revenue 402 | statementFour.cogs = arr1[0].cogs 403 | statementFour.rawMat = arr1[0].rawMat 404 | statementFour.freight = arr1[0].freight 405 | statementFour.factoryLabor = arr1[0].factoryLabor 406 | statementFour.storage = arr1[0].storage 407 | statementFour.grossProfit = arr1[0].grossProfit 408 | statementFour.otherOpCosts = arr1[0].otherOpCosts 409 | statementFour.indirectLabor = arr1[0].indirectLabor 410 | statementFour.legal = arr1[0].legal 411 | statementFour.officeEquip = arr1[0].officeEquip 412 | statementFour.opProfit = arr1[0].opProfit 413 | statementFour.opm = arr1[0].opm 414 | 415 | console.log(statementFour) 416 | 417 | } else if(scenario1.issue1.value === "1B"){ 418 | console.log(scenario1.issue1.value) 419 | statementTwo.show(statementTwo) 420 | 421 | arr1.push(statementTwo) 422 | statementFour.revenue = arr1[0].revenue 423 | statementFour.cogs = arr1[0].cogs 424 | statementFour.rawMat = arr1[0].rawMat 425 | statementFour.freight = arr1[0].freight 426 | statementFour.factoryLabor = arr1[0].factoryLabor 427 | statementFour.storage = arr1[0].storage 428 | statementFour.grossProfit = arr1[0].grossProfit 429 | statementFour.otherOpCosts = arr1[0].otherOpCosts 430 | statementFour.indirectLabor = arr1[0].indirectLabor 431 | statementFour.legal = arr1[0].legal 432 | statementFour.officeEquip = arr1[0].officeEquip 433 | statementFour.opProfit = arr1[0].opProfit 434 | statementFour.opm = arr1[0].opm 435 | 436 | console.log(statementFour) 437 | 438 | } else if (scenario1.issue1.value === "1C"){ 439 | console.log(scenario1.issue1.value) 440 | statementThree.show(statementThree) 441 | //push results from answer to array and then assign results to object for next scenario 442 | arr1.push(statementThree) 443 | statementFour.revenue = arr1[0].revenue 444 | statementFour.cogs = arr1[0].cogs 445 | statementFour.rawMat = arr1[0].rawMat 446 | statementFour.freight = arr1[0].freight 447 | statementFour.factoryLabor = arr1[0].factoryLabor 448 | statementFour.storage = arr1[0].storage 449 | statementFour.grossProfit = arr1[0].grossProfit 450 | statementFour.otherOpCosts = arr1[0].otherOpCosts 451 | statementFour.indirectLabor = arr1[0].indirectLabor 452 | statementFour.legal = arr1[0].legal 453 | statementFour.officeEquip = arr1[0].officeEquip 454 | statementFour.opProfit = arr1[0].opProfit 455 | statementFour.opm = arr1[0].opm 456 | 457 | console.log(statementFour) 458 | console.log(arr1) 459 | 460 | } 461 | }) 462 | 463 | clear1.addEventListener("click", ()=>{ 464 | statementStart.show(statementStart) 465 | arr1 = [] 466 | console.log("clear button works") 467 | }) 468 | 469 | next1.addEventListener("click", ()=>{ 470 | statementFour.show(statementFour) 471 | console.log("next1 works") 472 | //add an event to reveal the next scenario 473 | }) 474 | 475 | 476 | 477 | 478 | scenario2.addEventListener("submit", (e)=>{ 479 | e.preventDefault() 480 | // for (let ans = 0; ans<3; ans++){ 481 | // if(scenario2.issue2[ans].checked){ 482 | // break; 483 | // } 484 | // } 485 | 486 | if (scenario2.issue2.value === "2A"){ 487 | console.log(scenario2.issue2.value) 488 | // statementFive.show2A(statementFive) 489 | console.log(statementFive) 490 | 491 | console.log(statementFive[0].rawMat) 492 | 493 | // statementFive[1].show2A(statementFive[1]) 494 | 495 | // scenario2AArr.push(statementFive[1]) 496 | 497 | // console.log(scenario2AArr) 498 | 499 | //*FOLLOW THIS TO CARRY OVER RESULTS AND DISPLAY======== 500 | 501 | statementFive[0].rawMat = (statementFive[0].rawMat * .20) + statementFive[0].rawMat 502 | statementFive[0].show(statementFive[0]) 503 | 504 | console.log(statementFive[0].rawMat) 505 | 506 | arr2.push(statementFive) 507 | statementEight.revenue = arr2[0][0].revenue 508 | statementEight.cogs = arr2[0][0].cogs 509 | statementEight.rawMat = arr2[0][0].rawMat 510 | statementEight.freight = arr2[0][0].freight 511 | statementEight.factoryLabor = arr2[0][0].factoryLabor 512 | statementEight.storage = arr2[0][0].storage 513 | statementEight.grossProfit = arr2[0][0].grossProfit 514 | statementEight.otherOpCosts = arr2[0][0].otherOpCosts 515 | statementEight.indirectLabor = arr2[0][0].indirectLabor 516 | statementEight.legal = arr2[0][0].legal 517 | statementEight.officeEquip = arr2[0][0].officeEquip 518 | statementEight.opProfit = arr2[0][0].opProfit 519 | statementEight.opm = arr2[0][0].opm 520 | 521 | console.log(arr2) 522 | console.log(arr2[0][0]) 523 | console.log(statementEight) 524 | 525 | 526 | } else if(scenario2.issue2.value === "2B"){ 527 | console.log(scenario2.issue2.value) 528 | // statementSix.show(statementSix) 529 | 530 | console.log(arr1) 531 | 532 | console.log(statementSix[0].storage) 533 | 534 | statementSix[0].storage = statementSix[0].storage - (statementSix[0].storage * .10) 535 | statementSix[0].show(statementSix[0]) 536 | 537 | console.log(statementSix[0].storage) 538 | 539 | arr2.push(statementSix) 540 | statementEight.revenue = arr2[0][0].revenue 541 | statementEight.cogs = arr2[0][0].cogs 542 | statementEight.rawMat = arr2[0][0].rawMat 543 | statementEight.freight = arr2[0][0].freight 544 | statementEight.factoryLabor = arr2[0][0].factoryLabor 545 | statementEight.storage = arr2[0][0].storage 546 | statementEight.grossProfit = arr2[0][0].grossProfit 547 | statementEight.otherOpCosts = arr2[0][0].otherOpCosts 548 | statementEight.indirectLabor = arr2[0][0].indirectLabor 549 | statementEight.legal = arr2[0][0].legal 550 | statementEight.officeEquip = arr2[0][0].officeEquip 551 | statementEight.opProfit = arr2[0][0].opProfit 552 | statementEight.opm = arr2[0][0].opm 553 | 554 | console.log(statementEight) 555 | console.log(arr2) 556 | 557 | } else if (scenario2.issue2.value === "2C"){ 558 | console.log(scenario2.issue2.value) 559 | // statementSeven.show(statementSeven) 560 | 561 | console.log(statementSeven[0].freight) 562 | 563 | statementSeven[0].freight = statementSeven[0].freight - (statementSeven[0].freight * .10) 564 | statementSeven[0].show(statementSeven[0]) 565 | 566 | console.log(statementSeven[0].freight) 567 | 568 | 569 | //push results from answer to array and then assign results to object for next scenario 570 | arr2.push(statementSeven) 571 | statementEight.revenue = arr2[0][0].revenue 572 | statementEight.cogs = arr2[0][0].cogs 573 | statementEight.rawMat = arr2[0][0].rawMat 574 | statementEight.freight = arr2[0][0].freight 575 | statementEight.factoryLabor = arr2[0][0].factoryLabor 576 | statementEight.storage = arr2[0][0].storage 577 | statementEight.grossProfit = arr2[0][0].grossProfit 578 | statementEight.otherOpCosts = arr2[0][0].otherOpCosts 579 | statementEight.indirectLabor = arr2[0][0].indirectLabor 580 | statementEight.legal = arr2[0][0].legal 581 | statementEight.officeEquip = arr2[0][0].officeEquip 582 | statementEight.opProfit = arr2[0][0].opProfit 583 | statementEight.opm = arr2[0][0].opm 584 | 585 | console.log(statementEight) 586 | } 587 | }) 588 | 589 | clear2.addEventListener("click", ()=>{ 590 | statementFour.show(statementFour) 591 | arr2 = arr1 592 | }) 593 | 594 | next2.addEventListener("click", (e)=>{ 595 | e.preventDefault() 596 | statementEight.show(statementEight) 597 | console.log(statementEight) 598 | console.log(arr2) 599 | console.log("next2 works") 600 | //add an event to reveal the next scenario 601 | }) 602 | 603 | 604 | 605 | 606 | scenario3.addEventListener("submit", (e)=>{ 607 | e.preventDefault() 608 | 609 | if (scenario3.issue3.value === "3A"){ 610 | console.log(scenario3.issue3.value) 611 | 612 | console.log(arr2) 613 | 614 | console.log(statementNine[0][0]) 615 | 616 | statementNine[0][0].rawMat = (statementNine[0][0].rawMat * .30) + statementNine[0][0].rawMat 617 | statementNine[0][0].show(statementNine[0][0]) 618 | 619 | console.log(statementNine[0][0].freight) 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | //* FIGURE OUT WHY COGS IS NOT CALCULATING PROPERLY======= 630 | let decrease = statementNine[0][0].freight *.75 631 | 632 | statementNine[0][0].freight = statementNine[0][0].freight - decrease 633 | //*FIGURE OUT WHY COGS IS NOT CALCULATING PROPERLY======= 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | // statementNine[0][0].freight = statementNine[0][0].freight - (statementNine[0][0] * .75) 644 | // statementNine[0][0].show(statementNine[0][0]) 645 | 646 | console.log(statementNine[0][0].rawMat) 647 | console.log(statementNine[0][0].freight) 648 | 649 | arr3.push(statementNine[0][0]) 650 | statementTwelve.revenue = arr3[0].revenue 651 | statementTwelve.cogs = arr3[0].cogs 652 | statementTwelve.rawMat = arr3[0].rawMat 653 | statementTwelve.freight = arr3[0].freight 654 | statementTwelve.factoryLabor = arr3[0].factoryLabor 655 | statementTwelve.storage = arr3[0].storage 656 | statementTwelve.grossProfit = arr3[0].grossProfit 657 | statementTwelve.otherOpCosts = arr3[0].otherOpCosts 658 | statementTwelve.indirectLabor = arr3[0].indirectLabor 659 | statementTwelve.legal = arr3[0].legal 660 | statementTwelve.officeEquip = arr3[0].officeEquip 661 | statementTwelve.opProfit = arr3[0].opProfit 662 | statementTwelve.opm = arr3[0].opm 663 | 664 | console.log(statementTwelve) 665 | console.log(arr3) 666 | 667 | } else if(scenario3.issue3.value === "3B"){ 668 | console.log(scenario3.issue3.value) 669 | 670 | console.log(statementTen[0][0]) 671 | 672 | let d = statementTen[0][0].freight *.10 673 | 674 | statementTen[0][0].freight = statementTen[0][0].freight -d 675 | 676 | console.log(statementTen[0][0]) 677 | 678 | arr3.push(statementTen[0][0]) 679 | 680 | statementTwelve.revenue = arr3[0].revenue 681 | statementTwelve.cogs = arr3[0].cogs 682 | statementTwelve.rawMat = arr3[0].rawMat 683 | statementTwelve.freight = arr3[0].freight 684 | statementTwelve.factoryLabor = arr3[0].factoryLabor 685 | statementTwelve.storage = arr3[0].storage 686 | statementTwelve.grossProfit = arr3[0].grossProfit 687 | statementTwelve.otherOpCosts = arr3[0].otherOpCosts 688 | statementTwelve.indirectLabor = arr3[0].indirectLabor 689 | statementTwelve.legal = arr3[0].legal 690 | statementTwelve.officeEquip = arr3[0].officeEquip 691 | statementTwelve.opProfit = arr3[0].opProfit 692 | statementTwelve.opm = arr3[0].opm 693 | 694 | console.log(statementTwelve) 695 | 696 | } else if(scenario3.issue3.value === "3C"){ 697 | console.log(scenario3.issue3.value) 698 | 699 | console.log(statementEleven[0][0]) 700 | 701 | let de = statementEleven[0][0].freight *.05 702 | 703 | statementEleven[0][0].freight = statementEleven[0][0].freight - de 704 | 705 | console.log(statementEleven[0][0]) 706 | console.log(statementEleven[0][0].indirectLabor) 707 | 708 | let inc = statementEleven[0][0].indirectLabor *.10 709 | 710 | statementEleven[0][0].indirectLabor = statementEleven[0][0].indirectLabor + inc 711 | 712 | console.log(statementEleven[0][0].indirectLabor) 713 | 714 | arr3.push(statementEleven[0][0]) 715 | 716 | statementTwelve.revenue = arr3[0].revenue 717 | statementTwelve.cogs = arr3[0].cogs 718 | statementTwelve.rawMat = arr3[0].rawMat 719 | statementTwelve.freight = arr3[0].freight 720 | statementTwelve.factoryLabor = arr3[0].factoryLabor 721 | statementTwelve.storage = arr3[0].storage 722 | statementTwelve.grossProfit = arr3[0].grossProfit 723 | statementTwelve.otherOpCosts = arr3[0].otherOpCosts 724 | statementTwelve.indirectLabor = arr3[0].indirectLabor 725 | statementTwelve.legal = arr3[0].legal 726 | statementTwelve.officeEquip = arr3[0].officeEquip 727 | statementTwelve.opProfit = arr3[0].opProfit 728 | statementTwelve.opm = arr3[0].opm 729 | 730 | console.log(statementTwelve) 731 | 732 | } 733 | 734 | // FINISH COPYING FROM SCENARIO 2 735 | 736 | 737 | }) 738 | 739 | //??PUSH SCENARIO RESULTS TO NEW ARRAY AND REPEAT BETWEEN SCENARIO 2 & 3 740 | 741 | clear3.addEventListener("click", ()=>{ 742 | statementEight.show(statementEight) 743 | arr3 = arr2 744 | }) 745 | 746 | next3.addEventListener("click", ()=>{ 747 | statementTwelve.show(statementTwelve) 748 | //add an event to reveal the next scenario 749 | }) 750 | 751 | 752 | 753 | 754 | // console.log(statementFour.revenue) 755 | // console.log(statementFour.cogs) 756 | // console.log(statementFour.indirectLabor) 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | // statementStart.show(statementStart) 767 | // statementOne.show(statementOne) 768 | // statementTwo.show(statementTwo) 769 | // statementThree.show(statementThree) 770 | 771 | 772 | 773 | 774 | 775 | -------------------------------------------------------------------------------- /JS/script4.js: -------------------------------------------------------------------------------- 1 | //setting global vars 2 | let revenue = document.querySelector(".revenueNum") 3 | let cogs = document.querySelector(".cogsNum") 4 | let rawMat = document.querySelector(".rawMatNum") 5 | let freight = document.querySelector(".freightNum") 6 | let factoryLabor = document.querySelector(".factoryLaborNum") 7 | let storage = document.querySelector(".storageNum") 8 | let grossProfit = document.querySelector(".grossProfitNum") 9 | let otherOpCosts = document.querySelector(".otherOpCostsNum") 10 | let indirectLabor = document.querySelector(".indirectLaborNum") 11 | let legal = document.querySelector(".legalNum") 12 | let officeEquip = document.querySelector(".officeEquipNum") 13 | let opProfit = document.querySelector(".opProfitNum") 14 | let opm = document.querySelector(".opmNum") 15 | let statementStart 16 | let statementOne 17 | let statementTwo 18 | let statementThree 19 | let statementFour 20 | let statementFive 21 | let statementSix 22 | let statementSeven 23 | let statementEight 24 | let statementNine 25 | let statementTen 26 | let statementEleven 27 | let statementTwelve 28 | let statementThirteen 29 | let statementFourteen 30 | let statementFifteen 31 | let statementSixteen 32 | let clear1 = document.querySelector("#clear1") 33 | let next1 = document.querySelector("#next1") 34 | let clear2 = document.querySelector("#clear2") 35 | let next2 = document.querySelector("#next2") 36 | let clear3 = document.querySelector("#clear3") 37 | let next3 = document.querySelector("#next3") 38 | let clear4 = document.querySelector("#clear4") 39 | let finish = document.querySelector("#finish") 40 | const scenario1 = document.querySelector(".scenario1") 41 | const scenario2 = document.querySelector(".scenario2") 42 | const scenario3 = document.querySelector(".scenario3") 43 | const scenario4 = document.querySelector(".scenario4") 44 | let arr1 = [] 45 | let arr2 = [] 46 | let arr3 = [] 47 | let arr4 = [] 48 | // let scenario2AArr = [] 49 | 50 | //prototype class 51 | class masterIncomeStatement{ 52 | constructor( 53 | revenue, 54 | cogs, 55 | rawMat, 56 | freight, 57 | factoryLabor, 58 | storage, 59 | grossProfit, 60 | otherOpCosts, 61 | indirectLabor, 62 | legal, 63 | officeEquip, 64 | opProfit, 65 | opm 66 | ){ 67 | 68 | this.revenue = revenue; 69 | this.cogs = cogs; 70 | this.rawMat = rawMat; 71 | this.freight = freight; 72 | this.factoryLabor = factoryLabor; 73 | this.storage = storage; 74 | this.grossProfit = grossProfit; 75 | this.otherOpCosts = otherOpCosts; 76 | this.indirectLabor = indirectLabor; 77 | this.legal = legal; 78 | this.officeEquip = officeEquip; 79 | this.opProfit = opProfit; 80 | this.opm = opm; 81 | } 82 | 83 | //function to display income statement numbers 84 | show(statement){ 85 | revenue.textContent = statement.revenue 86 | statement.cogs = statement.rawMat + statement.freight + statement.factoryLabor + statement.storage 87 | cogs.textContent = statement.cogs 88 | rawMat.textContent = statement.rawMat 89 | freight.textContent = statement.freight 90 | factoryLabor.textContent = statement.factoryLabor 91 | storage.textContent = statement.storage 92 | statement.grossProfit = statement.revenue - statement.cogs 93 | grossProfit.textContent = statement.grossProfit 94 | statement.otherOpCosts = statement.indirectLabor + statement.legal + statement.officeEquip 95 | otherOpCosts.textContent = statement.otherOpCosts 96 | indirectLabor.textContent = statement.indirectLabor 97 | legal.textContent = statement.legal 98 | officeEquip.textContent = statement.officeEquip 99 | statement.opProfit = statement.grossProfit - statement.otherOpCosts 100 | opProfit.textContent = statement.opProfit 101 | statement.opm = (statement.opProfit / statement.revenue) *100 102 | opm.textContent = statement.opm 103 | } 104 | } 105 | 106 | statementStart = new masterIncomeStatement( 107 | 510000, 108 | null, 109 | 30000, 110 | 20000, 111 | 75000, 112 | 25000, 113 | null, 114 | null, 115 | 150000, 116 | 50000, 117 | 100000, 118 | null, 119 | null 120 | ) 121 | 122 | statementOne = new masterIncomeStatement( 123 | 510000, 124 | null, 125 | 30000, 126 | 20000, 127 | 75000, 128 | 25000, 129 | null, 130 | null, 131 | 172500, 132 | 50000, 133 | 100000, 134 | null, 135 | null 136 | ) 137 | 138 | statementTwo = new masterIncomeStatement( 139 | 510000, 140 | null, 141 | 30000, 142 | 20000, 143 | 75000, 144 | 25000, 145 | null, 146 | null, 147 | 150000, 148 | 50000, 149 | 125000, 150 | null, 151 | null 152 | ) 153 | 154 | statementThree = new masterIncomeStatement( 155 | 510000, 156 | null, 157 | 30000, 158 | 20000, 159 | 75000, 160 | 37500, 161 | null, 162 | null, 163 | 135000, 164 | 50000, 165 | 100000, 166 | null, 167 | null 168 | ) 169 | 170 | statementFour = new masterIncomeStatement( 171 | revenue, 172 | cogs, 173 | rawMat, 174 | freight, 175 | factoryLabor, 176 | storage, 177 | grossProfit, 178 | otherOpCosts, 179 | indirectLabor, 180 | legal, 181 | officeEquip, 182 | opProfit, 183 | opm 184 | ) 185 | 186 | statementFive = arr1 187 | 188 | statementSix = arr1 189 | 190 | statementSeven = arr1 191 | 192 | 193 | statementEight = new masterIncomeStatement( 194 | revenue, 195 | cogs, 196 | rawMat, 197 | freight, 198 | factoryLabor, 199 | storage, 200 | grossProfit, 201 | otherOpCosts, 202 | indirectLabor, 203 | legal, 204 | officeEquip, 205 | opProfit, 206 | opm 207 | ) 208 | 209 | statementNine = arr2 210 | 211 | statementTen = arr2 212 | 213 | statementEleven = arr2 214 | 215 | statementTwelve = new masterIncomeStatement( 216 | revenue, 217 | cogs, 218 | rawMat, 219 | freight, 220 | factoryLabor, 221 | storage, 222 | grossProfit, 223 | otherOpCosts, 224 | indirectLabor, 225 | legal, 226 | officeEquip, 227 | opProfit, 228 | opm 229 | ) 230 | 231 | statementThirteen = arr3 232 | 233 | statementFourteen = arr3 234 | 235 | statementFifteen = arr3 236 | 237 | // statementSixteen = arr4 238 | statementSixteen = new masterIncomeStatement( 239 | revenue, 240 | cogs, 241 | rawMat, 242 | freight, 243 | factoryLabor, 244 | storage, 245 | grossProfit, 246 | otherOpCosts, 247 | indirectLabor, 248 | legal, 249 | officeEquip, 250 | opProfit, 251 | opm 252 | ) 253 | 254 | statementStart.show(statementStart) 255 | 256 | scenario1.addEventListener("submit", (e)=>{ 257 | e.preventDefault() 258 | console.log("submit works") 259 | if (scenario1.issue1.value === "1A"){ 260 | console.log(scenario1.issue1.value) 261 | console.log(statementOne) 262 | arr1.push(statementOne) 263 | statementFour.revenue = arr1[0].revenue 264 | statementFour.cogs = arr1[0].cogs 265 | statementFour.rawMat = arr1[0].rawMat 266 | statementFour.freight = arr1[0].freight 267 | statementFour.factoryLabor = arr1[0].factoryLabor 268 | statementFour.storage = arr1[0].storage 269 | statementFour.grossProfit = arr1[0].grossProfit 270 | statementFour.otherOpCosts = arr1[0].otherOpCosts 271 | statementFour.indirectLabor = arr1[0].indirectLabor 272 | statementFour.legal = arr1[0].legal 273 | statementFour.officeEquip = arr1[0].officeEquip 274 | statementFour.opProfit = arr1[0].opProfit 275 | statementFour.opm = arr1[0].opm 276 | 277 | console.log(statementFour) 278 | console.log(arr1) 279 | statementOne.show(statementOne) 280 | 281 | } else if(scenario1.issue1.value === "1B"){ 282 | console.log(scenario1.issue1.value) 283 | console.log(statementTwo) 284 | arr1.push(statementTwo) 285 | statementFour.revenue = arr1[0].revenue 286 | statementFour.cogs = arr1[0].cogs 287 | statementFour.rawMat = arr1[0].rawMat 288 | statementFour.freight = arr1[0].freight 289 | statementFour.factoryLabor = arr1[0].factoryLabor 290 | statementFour.storage = arr1[0].storage 291 | statementFour.grossProfit = arr1[0].grossProfit 292 | statementFour.otherOpCosts = arr1[0].otherOpCosts 293 | statementFour.indirectLabor = arr1[0].indirectLabor 294 | statementFour.legal = arr1[0].legal 295 | statementFour.officeEquip = arr1[0].officeEquip 296 | statementFour.opProfit = arr1[0].opProfit 297 | statementFour.opm = arr1[0].opm 298 | 299 | console.log(statementFour) 300 | console.log(arr1) 301 | statementTwo.show(statementTwo) 302 | 303 | } else if (scenario1.issue1.value === "1C"){ 304 | console.log(scenario1.issue1.value) 305 | //push results from answer to array and then assign results to object for next scenario 306 | console.log(statementThree) 307 | arr1.push(statementThree) 308 | statementFour.revenue = arr1[0].revenue 309 | statementFour.cogs = arr1[0].cogs 310 | statementFour.rawMat = arr1[0].rawMat 311 | statementFour.freight = arr1[0].freight 312 | statementFour.factoryLabor = arr1[0].factoryLabor 313 | statementFour.storage = arr1[0].storage 314 | statementFour.grossProfit = arr1[0].grossProfit 315 | statementFour.otherOpCosts = arr1[0].otherOpCosts 316 | statementFour.indirectLabor = arr1[0].indirectLabor 317 | statementFour.legal = arr1[0].legal 318 | statementFour.officeEquip = arr1[0].officeEquip 319 | statementFour.opProfit = arr1[0].opProfit 320 | statementFour.opm = arr1[0].opm 321 | 322 | console.log(statementFour) 323 | console.log(arr1) 324 | 325 | statementThree.show(statementThree) 326 | } 327 | }) 328 | 329 | clear1.addEventListener("click", ()=>{ 330 | statementStart.show(statementStart) 331 | arr1 = [] 332 | console.log("clear button works") 333 | console.log(arr1) 334 | }) 335 | 336 | next1.addEventListener("click", ()=>{ 337 | statementFour.show(statementFour) 338 | console.log("next1 works") 339 | console.log(statementFour) 340 | //add an event to reveal the next scenario 341 | }) 342 | 343 | 344 | 345 | 346 | scenario2.addEventListener("submit", (e)=>{ 347 | e.preventDefault() 348 | console.log("submit2 works") 349 | 350 | if (scenario2.issue2.value === "2A"){ 351 | console.log(scenario2.issue2.value) 352 | // statementFive[0].show(statementFive[0]) 353 | console.log(statementFive[0]) 354 | 355 | console.log(statementFive[0].rawMat) 356 | 357 | let increase = statementFive[0].rawMat * .20 358 | 359 | statementFive[0].rawMat = increase + statementFive[0].rawMat 360 | 361 | statementFive[0].show(statementFive[0]) 362 | 363 | console.log(statementFive[0].rawMat) 364 | 365 | arr2.push(statementFive[0]) 366 | statementEight.revenue = arr2[0].revenue 367 | statementEight.cogs = arr2[0].cogs 368 | statementEight.rawMat = arr2[0].rawMat 369 | statementEight.freight = arr2[0].freight 370 | statementEight.factoryLabor = arr2[0].factoryLabor 371 | statementEight.storage = arr2[0].storage 372 | statementEight.grossProfit = arr2[0].grossProfit 373 | statementEight.otherOpCosts = arr2[0].otherOpCosts 374 | statementEight.indirectLabor = arr2[0].indirectLabor 375 | statementEight.legal = arr2[0].legal 376 | statementEight.officeEquip = arr2[0].officeEquip 377 | statementEight.opProfit = arr2[0].opProfit 378 | statementEight.opm = arr2[0].opm 379 | 380 | console.log(arr2) 381 | console.log(arr2[0][0]) 382 | console.log(statementEight) 383 | 384 | 385 | } else if(scenario2.issue2.value === "2B"){ 386 | console.log(scenario2.issue2.value) 387 | // statementSix[0].show(statementSix[0]) 388 | 389 | console.log(arr1) 390 | 391 | console.log(statementSix[0].storage) 392 | 393 | let decrease = statementSix[0].storage * .10 394 | 395 | statementSix[0].storage = statementSix[0].storage - decrease 396 | 397 | statementSix[0].show(statementSix[0]) 398 | 399 | console.log(statementSix[0].storage) 400 | 401 | arr2.push(statementSix[0]) 402 | console.log(arr2) 403 | statementEight.revenue = arr2[0].revenue 404 | statementEight.cogs = arr2[0].cogs 405 | statementEight.rawMat = arr2[0].rawMat 406 | statementEight.freight = arr2[0].freight 407 | statementEight.factoryLabor = arr2[0].factoryLabor 408 | statementEight.storage = arr2[0].storage 409 | statementEight.grossProfit = arr2[0].grossProfit 410 | statementEight.otherOpCosts = arr2[0].otherOpCosts 411 | statementEight.indirectLabor = arr2[0].indirectLabor 412 | statementEight.legal = arr2[0].legal 413 | statementEight.officeEquip = arr2[0].officeEquip 414 | statementEight.opProfit = arr2[0].opProfit 415 | statementEight.opm = arr2[0].opm 416 | 417 | console.log(statementEight) 418 | console.log(arr2) 419 | 420 | } else if (scenario2.issue2.value === "2C"){ 421 | console.log(scenario2.issue2.value) 422 | // statementSeven[0].show(statementSeven[0]) 423 | 424 | console.log(statementSeven[0].freight) 425 | 426 | let decrease = statementSeven[0].freight * .10 427 | 428 | statementSeven[0].freight = statementSeven[0].freight - decrease 429 | 430 | statementSeven[0].show(statementSeven[0]) 431 | 432 | console.log(statementSeven[0].freight) 433 | 434 | 435 | //push results from answer to array and then assign results to object for next scenario 436 | arr2.push(statementSeven[0]) 437 | statementEight.revenue = arr2[0].revenue 438 | statementEight.cogs = arr2[0].cogs 439 | statementEight.rawMat = arr2[0].rawMat 440 | statementEight.freight = arr2[0].freight 441 | statementEight.factoryLabor = arr2[0].factoryLabor 442 | statementEight.storage = arr2[0].storage 443 | statementEight.grossProfit = arr2[0].grossProfit 444 | statementEight.otherOpCosts = arr2[0].otherOpCosts 445 | statementEight.indirectLabor = arr2[0].indirectLabor 446 | statementEight.legal = arr2[0].legal 447 | statementEight.officeEquip = arr2[0].officeEquip 448 | statementEight.opProfit = arr2[0].opProfit 449 | statementEight.opm = arr2[0].opm 450 | 451 | console.log(statementEight) 452 | } 453 | }) 454 | 455 | clear2.addEventListener("click", ()=>{ 456 | statementFour.show(statementFour) 457 | arr2 = arr1 458 | console.log(arr1) 459 | }) 460 | 461 | next2.addEventListener("click", (e)=>{ 462 | e.preventDefault() 463 | statementEight.show(statementEight) 464 | console.log(statementEight) 465 | console.log(arr2) 466 | console.log(statementNine[0]) 467 | console.log(statementNine[0]) 468 | 469 | console.log("next2 works") 470 | //add an event to reveal the next scenario 471 | }) 472 | 473 | 474 | scenario3.addEventListener("submit", (e)=>{ 475 | e.preventDefault() 476 | 477 | if (scenario3.issue3.value === "3A"){ 478 | console.log(scenario3.issue3.value) 479 | 480 | // console.log(arr2) 481 | 482 | // console.log(statementNine[0][0]) 483 | 484 | console.log(statementNine[0].rawMat) 485 | 486 | let increase = statementNine[0].rawMat * .3 487 | 488 | console.log(increase) 489 | 490 | statementNine[0].rawMat = increase + statementNine[0].rawMat 491 | 492 | console.log(statementNine[0].rawMat) 493 | 494 | console.log(statementNine[0]) 495 | 496 | // statementNine[0].show(statementNine[0]) //HERE IS THE PROBLEM...look at the show function 497 | 498 | console.log(statementNine[0]) 499 | 500 | // console.log(statementNine[0].freight) 501 | 502 | console.log(statementNine[0]) 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | //* FIGURE OUT WHY COGS IS NOT CALCULATING PROPERLY======= 513 | let decrease = statementNine[0].freight *.75 514 | 515 | statementNine[0].freight = statementNine[0].freight - decrease 516 | //*FIGURE OUT WHY COGS IS NOT CALCULATING PROPERLY======= 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | // statementNine[0][0].freight = statementNine[0][0].freight - (statementNine[0][0] * .75) 527 | // statementNine[0][0].show(statementNine[0][0]) 528 | 529 | // console.log(statementNine[0][0].rawMat) 530 | // console.log(statementNine[0][0].freight) 531 | 532 | arr3.push(statementNine[0]) 533 | statementTwelve.revenue = arr3[0].revenue 534 | statementTwelve.cogs = arr3[0].cogs 535 | statementTwelve.rawMat = arr3[0].rawMat 536 | statementTwelve.freight = arr3[0].freight 537 | statementTwelve.factoryLabor = arr3[0].factoryLabor 538 | statementTwelve.storage = arr3[0].storage 539 | statementTwelve.grossProfit = arr3[0].grossProfit 540 | statementTwelve.otherOpCosts = arr3[0].otherOpCosts 541 | statementTwelve.indirectLabor = arr3[0].indirectLabor 542 | statementTwelve.legal = arr3[0].legal 543 | statementTwelve.officeEquip = arr3[0].officeEquip 544 | statementTwelve.opProfit = arr3[0].opProfit 545 | statementTwelve.opm = arr3[0].opm 546 | 547 | // console.log(statementTwelve) 548 | // console.log(arr3) 549 | 550 | statementNine[0].show(statementNine[0]) // adding show function at the end of 3A 551 | 552 | 553 | } else if(scenario3.issue3.value === "3B"){ 554 | console.log(scenario3.issue3.value) 555 | 556 | console.log(statementTen[0]) 557 | 558 | let decrease = statementTen[0].freight *.10 559 | 560 | statementTen[0].freight = statementTen[0].freight -decrease 561 | 562 | console.log(statementTen[0]) 563 | 564 | arr3.push(statementTen[0]) 565 | 566 | statementTwelve.revenue = arr3[0].revenue 567 | statementTwelve.cogs = arr3[0].cogs 568 | statementTwelve.rawMat = arr3[0].rawMat 569 | statementTwelve.freight = arr3[0].freight 570 | statementTwelve.factoryLabor = arr3[0].factoryLabor 571 | statementTwelve.storage = arr3[0].storage 572 | statementTwelve.grossProfit = arr3[0].grossProfit 573 | statementTwelve.otherOpCosts = arr3[0].otherOpCosts 574 | statementTwelve.indirectLabor = arr3[0].indirectLabor 575 | statementTwelve.legal = arr3[0].legal 576 | statementTwelve.officeEquip = arr3[0].officeEquip 577 | statementTwelve.opProfit = arr3[0].opProfit 578 | statementTwelve.opm = arr3[0].opm 579 | 580 | statementTen[0].show(statementTen[0]) 581 | 582 | console.log(statementTwelve) 583 | 584 | } else if(scenario3.issue3.value === "3C"){ 585 | console.log(scenario3.issue3.value) 586 | 587 | console.log(statementEleven[0]) 588 | 589 | let decrease = statementEleven[0].freight *.05 590 | 591 | statementEleven[0].freight = statementEleven[0].freight - decrease 592 | 593 | console.log(statementEleven[0]) 594 | console.log(statementEleven[0].indirectLabor) 595 | 596 | let increase = statementEleven[0].indirectLabor *.10 597 | 598 | statementEleven[0].indirectLabor = statementEleven[0].indirectLabor + increase 599 | 600 | console.log(statementEleven[0].indirectLabor) 601 | 602 | arr3.push(statementEleven[0]) 603 | 604 | statementTwelve.revenue = arr3[0].revenue 605 | statementTwelve.cogs = arr3[0].cogs 606 | statementTwelve.rawMat = arr3[0].rawMat 607 | statementTwelve.freight = arr3[0].freight 608 | statementTwelve.factoryLabor = arr3[0].factoryLabor 609 | statementTwelve.storage = arr3[0].storage 610 | statementTwelve.grossProfit = arr3[0].grossProfit 611 | statementTwelve.otherOpCosts = arr3[0].otherOpCosts 612 | statementTwelve.indirectLabor = arr3[0].indirectLabor 613 | statementTwelve.legal = arr3[0].legal 614 | statementTwelve.officeEquip = arr3[0].officeEquip 615 | statementTwelve.opProfit = arr3[0].opProfit 616 | statementTwelve.opm = arr3[0].opm 617 | 618 | console.log(statementTwelve) 619 | 620 | statementEleven[0].show(statementEleven[0]) 621 | 622 | } 623 | 624 | // FINISH COPYING FROM SCENARIO 2 625 | 626 | 627 | }) 628 | 629 | //??PUSH SCENARIO RESULTS TO NEW ARRAY AND REPEAT BETWEEN SCENARIO 2 & 3 630 | 631 | clear3.addEventListener("click", ()=>{ 632 | statementEight.show(statementEight) 633 | arr3 = arr2 634 | }) 635 | 636 | next3.addEventListener("click", (e)=>{ 637 | e.preventDefault() 638 | statementTwelve.show(statementTwelve) 639 | console.log("next3 works") 640 | //add an event to reveal the next scenario 641 | }) 642 | 643 | scenario4.addEventListener("submit", (e)=>{ 644 | e.preventDefault() 645 | 646 | if(scenario4.issue4.value === "4A"){ 647 | console.log(scenario4.issue4.value) 648 | console.log(statementSixteen) 649 | 650 | let decrease = statementThirteen[0].factoryLabor *.10 651 | 652 | statementThirteen[0].factoryLabor = statementThirteen[0].factoryLabor - decrease 653 | 654 | let increase = statementThirteen[0].indirectLabor * .05 655 | 656 | statementThirteen[0].indirectLabor = statementThirteen[0].indirectLabor + increase 657 | 658 | arr4.push(statementThirteen[0]) 659 | console.log(arr4[0]) 660 | console.log(arr4) 661 | console.log(statementSixteen) 662 | statementSixteen.revenue = arr4[0].revenue 663 | statementSixteen.cogs = arr4[0].cogs 664 | statementSixteen.rawMat = arr4[0].rawMat 665 | statementSixteen.freight = arr4[0].freight 666 | statementSixteen.factoryLabor = arr4[0].factoryLabor 667 | statementSixteen.storage = arr4[0].storage 668 | statementSixteen.grossProfit = arr4[0].grossProfit 669 | statementSixteen.otherOpCosts = arr4[0].otherOpCosts 670 | statementSixteen.indirectLabor = arr4[0].indirectLabor 671 | statementSixteen.legal = arr4[0].legal 672 | statementSixteen.officeEquip = arr4[0].officeEquip 673 | statementSixteen.opProfit = arr4[0].opProfit 674 | statementSixteen.opm = arr4[0].opm 675 | 676 | console.log(statementSixteen) 677 | statementThirteen[0].show(statementThirteen[0]) 678 | 679 | 680 | 681 | } else if (scenario4.issue4.value === "4B"){ 682 | console.log(scenario4.issue4.value) 683 | 684 | let increase = statementFourteen[0].factoryLabor * .05 685 | 686 | statementFourteen[0].factoryLabor = statementFourteen[0].factoryLabor + increase 687 | 688 | arr4.push(statementFourteen[0]) 689 | statementSixteen.revenue = arr4[0].revenue 690 | statementSixteen.cogs = arr4[0].cogs 691 | statementSixteen.rawMat = arr4[0].rawMat 692 | statementSixteen.freight = arr4[0].freight 693 | statementSixteen.factoryLabor = arr4[0].factoryLabor 694 | statementSixteen.storage = arr4[0].storage 695 | statementSixteen.grossProfit = arr4[0].grossProfit 696 | statementSixteen.otherOpCosts = arr4[0].otherOpCosts 697 | statementSixteen.indirectLabor = arr4[0].indirectLabor 698 | statementSixteen.legal = arr4[0].legal 699 | statementSixteen.officeEquip = arr4[0].officeEquip 700 | statementSixteen.opProfit = arr4[0].opProfit 701 | statementSixteen.opm = arr4[0].opm 702 | 703 | statementFourteen[0].show(statementFourteen[0]) 704 | 705 | console.log(statementSixteen) 706 | console.log(arr4) 707 | 708 | }else if (scenario4.issue4.value === "4C"){ 709 | console.log(scenario4.issue4.value) 710 | 711 | let increase = statementFifteen[0].indirectLabor *.10 712 | 713 | statementFifteen[0].indirectLabor = statementFifteen[0].indirectLabor + increase 714 | 715 | let decrease = statementFifteen[0].factoryLabor * .10 716 | 717 | statementFifteen[0].factoryLabor = statementFifteen[0].factoryLabor - decrease 718 | 719 | arr4.push(statementFifteen[0]) 720 | statementSixteen.revenue = arr4[0].revenue 721 | statementSixteen.cogs = arr4[0].cogs 722 | statementSixteen.rawMat = arr4[0].rawMat 723 | statementSixteen.freight = arr4[0].freight 724 | statementSixteen.factoryLabor = arr4[0].factoryLabor 725 | statementSixteen.storage = arr4[0].storage 726 | statementSixteen.grossProfit = arr4[0].grossProfit 727 | statementSixteen.otherOpCosts = arr4[0].otherOpCosts 728 | statementSixteen.indirectLabor = arr4[0].indirectLabor 729 | statementSixteen.legal = arr4[0].legal 730 | statementSixteen.officeEquip = arr4[0].officeEquip 731 | statementSixteen.opProfit = arr4[0].opProfit 732 | statementSixteen.opm = arr4[0].opm 733 | 734 | statementFifteen[0].show(statementFifteen[0]) 735 | 736 | 737 | } 738 | }) 739 | 740 | clear4.addEventListener("click", ()=>{ 741 | statementTwelve.show(statementTwelve) 742 | arr4 = arr3 743 | }) 744 | 745 | finish.addEventListener("click", (e)=>{ 746 | e.preventDefault() 747 | statementSixteen.show(statementSixteen) 748 | console.log(statementSixteen) 749 | 750 | // console.log(statementThirteen[0]) 751 | // console.log(statementSixteen) 752 | // console.log(arr4[0]) 753 | // console.log(statementStart) 754 | 755 | if (statementSixteen.opm > statementStart.opm){ 756 | console.log("you win!") 757 | } else { 758 | console.log("you lose!") 759 | } 760 | }) 761 | 762 | 763 | 764 | //COMPLETE THE FINISH BUTTON 765 | //SHOW WIN STATE 766 | 767 | //FIGURE OUT WHY MULTIPLE CLICKS OVERWRITES THE CORRECT DATA 768 | //MAKE IT LOOK LIKE AN ACTUAL GAME (STYLING!!!!!!!) -------------------------------------------------------------------------------- /JS/script5.js: -------------------------------------------------------------------------------- 1 | //establishing global variables 2 | let revenue = document.querySelector(".revenueNum") 3 | let cogs = document.querySelector(".cogsNum") 4 | let rawMat = document.querySelector(".rawMatNum") 5 | let freight = document.querySelector(".freightNum") 6 | let factoryLabor = document.querySelector(".factoryLaborNum") 7 | let storage = document.querySelector(".storageNum") 8 | let grossProfit = document.querySelector(".grossProfitNum") 9 | let otherOpCosts = document.querySelector(".otherOpCostsNum") 10 | let indirectLabor = document.querySelector(".indirectLaborNum") 11 | let legal = document.querySelector(".legalNum") 12 | let officeEquip = document.querySelector(".officeEquipNum") 13 | let opProfit = document.querySelector(".opProfitNum") 14 | let opm = document.querySelector(".opmNum") 15 | let results = document.querySelector(".results") 16 | let statementStart 17 | let statementOne 18 | let statementTwo 19 | let statementThree 20 | let statementFour 21 | let statementFive 22 | let statementSix 23 | let statementSeven 24 | let statementEight 25 | let statementNine 26 | let statementTen 27 | let statementEleven 28 | let statementTwelve 29 | let statementThirteen 30 | let statementFourteen 31 | let statementFifteen 32 | let statementSixteen 33 | let clear1 = document.querySelector("#clear1") 34 | let next1 = document.querySelector("#next1") 35 | let clear2 = document.querySelector("#clear2") 36 | let next2 = document.querySelector("#next2") 37 | let clear3 = document.querySelector("#clear3") 38 | let next3 = document.querySelector("#next3") 39 | let clear4 = document.querySelector("#clear4") 40 | let finish = document.querySelector("#finish") 41 | const scenario1 = document.querySelector(".scenario1") 42 | const scenario2 = document.querySelector(".scenario2") 43 | const scenario3 = document.querySelector(".scenario3") 44 | const scenario4 = document.querySelector(".scenario4") 45 | const radio1A = document.querySelector("#issue1A") 46 | const radio1B = document.querySelector("#issue2A") 47 | const radio1C = document.querySelector("#issue3A") 48 | const radio2A = document.querySelector("#issue2A") 49 | const radio2B = document.querySelector("#issue2B") 50 | const radio2C = document.querySelector("#issue2C") 51 | const radio3A = document.querySelector("#issue3A") 52 | const radio3B = document.querySelector("#issue3B") 53 | const radio3C = document.querySelector("#issue3C") 54 | const radio4A = document.querySelector("#issue4A") 55 | const radio4B = document.querySelector("#issue4B") 56 | const radio4C = document.querySelector("#issue4C") 57 | let arr1 = [] 58 | let arr2 = [] 59 | let arr3 = [] 60 | let arr4 = [] 61 | let resetBtn = document.querySelector("#resetBtn") 62 | let q1 = document.querySelector("#q1") 63 | 64 | 65 | //prototype class 66 | class masterIncomeStatement{ 67 | constructor( 68 | revenue, 69 | cogs, 70 | rawMat, 71 | freight, 72 | factoryLabor, 73 | storage, 74 | grossProfit, 75 | otherOpCosts, 76 | indirectLabor, 77 | legal, 78 | officeEquip, 79 | opProfit, 80 | opm 81 | ){ 82 | this.revenue = revenue; 83 | this.cogs = cogs; 84 | this.rawMat = rawMat; 85 | this.freight = freight; 86 | this.factoryLabor = factoryLabor; 87 | this.storage = storage; 88 | this.grossProfit = grossProfit; 89 | this.otherOpCosts = otherOpCosts; 90 | this.indirectLabor = indirectLabor; 91 | this.legal = legal; 92 | this.officeEquip = officeEquip; 93 | this.opProfit = opProfit; 94 | this.opm = opm; 95 | } 96 | //function to execute Bold income statement math and display numbers 97 | show(statement){ 98 | revenue.textContent = "$" + statement.revenue 99 | statement.cogs = statement.rawMat + statement.freight + statement.factoryLabor + statement.storage 100 | cogs.textContent = "$" + statement.cogs 101 | rawMat.textContent = "$" + statement.rawMat 102 | freight.textContent = "$" + statement.freight 103 | factoryLabor.textContent = "$" + statement.factoryLabor 104 | storage.textContent = "$" + statement.storage 105 | statement.grossProfit = statement.revenue - statement.cogs 106 | grossProfit.textContent = "$" + statement.grossProfit 107 | statement.otherOpCosts = statement.indirectLabor + statement.legal + statement.officeEquip 108 | otherOpCosts.textContent = "$" + statement.otherOpCosts 109 | indirectLabor.textContent = "$" + statement.indirectLabor 110 | legal.textContent = "$" + statement.legal 111 | officeEquip.textContent = "$" + statement.officeEquip 112 | statement.opProfit = statement.grossProfit - statement.otherOpCosts 113 | opProfit.textContent = "$" + statement.opProfit 114 | statement.opm = (statement.opProfit / statement.revenue) *100 115 | opm.textContent = statement.opm.toFixed(2) + "%" 116 | } 117 | 118 | } 119 | 120 | //starting class/object with figures given plus the first 3 outcome objects with figures given for each scenario 121 | 122 | //statement at the beginning of the game 123 | statementStart = new masterIncomeStatement( 124 | 510000, 125 | null, 126 | 30000, 127 | 20000, 128 | 75000, 129 | 25000, 130 | null, 131 | null, 132 | 150000, 133 | 50000, 134 | 100000, 135 | null, 136 | null 137 | ) 138 | //statement for 1A 139 | statementOne = new masterIncomeStatement( 140 | 510000, 141 | null, 142 | 30000, 143 | 20000, 144 | 75000, 145 | 25000, 146 | null, 147 | null, 148 | 172500, 149 | 50000, 150 | 100000, 151 | null, 152 | null 153 | ) 154 | //statement for 1B 155 | statementTwo = new masterIncomeStatement( 156 | 510000, 157 | null, 158 | 30000, 159 | 20000, 160 | 75000, 161 | 25000, 162 | null, 163 | null, 164 | 150000, 165 | 50000, 166 | 125000, 167 | null, 168 | null 169 | ) 170 | //statement for 1C 171 | statementThree = new masterIncomeStatement( 172 | 510000, 173 | null, 174 | 30000, 175 | 20000, 176 | 75000, 177 | 37500, 178 | null, 179 | null, 180 | 135000, 181 | 50000, 182 | 100000, 183 | null, 184 | null 185 | ) 186 | //Answer selected from scenario 1 is stored in this object after being pushed into arr1 187 | statementFour = new masterIncomeStatement( 188 | revenue, 189 | cogs, 190 | rawMat, 191 | freight, 192 | factoryLabor, 193 | storage, 194 | grossProfit, 195 | otherOpCosts, 196 | indirectLabor, 197 | legal, 198 | officeEquip, 199 | opProfit, 200 | opm 201 | ) 202 | 203 | //setting starting case for scenario 2. Selection from scenario 1 is stored in arr1 so numbers can accumulate over to scenario 2 204 | 205 | //statement for 2A 206 | statementFive = arr1 207 | 208 | //statement for 2B 209 | statementSix = arr1 210 | 211 | //statement for 2C 212 | statementSeven = arr1 213 | 214 | //Answer selected from scenario 2 is stored in this object after being pushed into arr2 215 | statementEight = new masterIncomeStatement( 216 | revenue, 217 | cogs, 218 | rawMat, 219 | freight, 220 | factoryLabor, 221 | storage, 222 | grossProfit, 223 | otherOpCosts, 224 | indirectLabor, 225 | legal, 226 | officeEquip, 227 | opProfit, 228 | opm 229 | ) 230 | 231 | //setting starting case for scenario 3. Selection from scenario 2 is stored in arr2 so numbers can accumulate over to scenario 3 232 | 233 | //statement for 3A 234 | statementNine = arr2 235 | 236 | //statement for 3A 237 | statementTen = arr2 238 | 239 | //statement for 3A 240 | statementEleven = arr2 241 | 242 | //Answer selected from scenario 3 is stored in this object after being pushed into arr3 243 | statementTwelve = new masterIncomeStatement( 244 | revenue, 245 | cogs, 246 | rawMat, 247 | freight, 248 | factoryLabor, 249 | storage, 250 | grossProfit, 251 | otherOpCosts, 252 | indirectLabor, 253 | legal, 254 | officeEquip, 255 | opProfit, 256 | opm 257 | ) 258 | 259 | //setting starting case for scenario 4. Selection from scenario 3 is stored in arr3 so numbers can accumulate over to scenario 4 260 | 261 | //statement for 4A 262 | statementThirteen = arr3 263 | 264 | //statement for 4A 265 | statementFourteen = arr3 266 | 267 | //statement for 4A 268 | statementFifteen = arr3 269 | 270 | //Answer selected from scenario 4 is stored in this object after being pushed into arr4 271 | statementSixteen = new masterIncomeStatement( 272 | revenue, 273 | cogs, 274 | rawMat, 275 | freight, 276 | factoryLabor, 277 | storage, 278 | grossProfit, 279 | otherOpCosts, 280 | indirectLabor, 281 | legal, 282 | officeEquip, 283 | opProfit, 284 | opm 285 | ) 286 | 287 | //displays the income statement at the beginning of the game 288 | statementStart.show(statementStart) 289 | 290 | //Scenario 1 SUBMIT button event listener with if statements based on the answer selected. Each block pushes the answer chosen to an array then displays income statement based on decision made 291 | scenario1.addEventListener("submit", (e)=>{ 292 | e.preventDefault() 293 | if (scenario1.issue1.value === "1A"){ 294 | arr1.push(statementOne) 295 | statementFour.revenue = arr1[0].revenue 296 | statementFour.cogs = arr1[0].cogs 297 | statementFour.rawMat = arr1[0].rawMat 298 | statementFour.freight = arr1[0].freight 299 | statementFour.factoryLabor = arr1[0].factoryLabor 300 | statementFour.storage = arr1[0].storage 301 | statementFour.grossProfit = arr1[0].grossProfit 302 | statementFour.otherOpCosts = arr1[0].otherOpCosts 303 | statementFour.indirectLabor = arr1[0].indirectLabor 304 | statementFour.legal = arr1[0].legal 305 | statementFour.officeEquip = arr1[0].officeEquip 306 | statementFour.opProfit = arr1[0].opProfit 307 | statementFour.opm = arr1[0].opm 308 | 309 | statementOne.show(statementOne) 310 | 311 | 312 | } else if(scenario1.issue1.value === "1B"){ 313 | arr1.push(statementTwo) 314 | statementFour.revenue = arr1[0].revenue 315 | statementFour.cogs = arr1[0].cogs 316 | statementFour.rawMat = arr1[0].rawMat 317 | statementFour.freight = arr1[0].freight 318 | statementFour.factoryLabor = arr1[0].factoryLabor 319 | statementFour.storage = arr1[0].storage 320 | statementFour.grossProfit = arr1[0].grossProfit 321 | statementFour.otherOpCosts = arr1[0].otherOpCosts 322 | statementFour.indirectLabor = arr1[0].indirectLabor 323 | statementFour.legal = arr1[0].legal 324 | statementFour.officeEquip = arr1[0].officeEquip 325 | statementFour.opProfit = arr1[0].opProfit 326 | statementFour.opm = arr1[0].opm 327 | 328 | statementTwo.show(statementTwo) 329 | 330 | } else if (scenario1.issue1.value === "1C"){ 331 | arr1.push(statementThree) 332 | statementFour.revenue = arr1[0].revenue 333 | statementFour.cogs = arr1[0].cogs 334 | statementFour.rawMat = arr1[0].rawMat 335 | statementFour.freight = arr1[0].freight 336 | statementFour.factoryLabor = arr1[0].factoryLabor 337 | statementFour.storage = arr1[0].storage 338 | statementFour.grossProfit = arr1[0].grossProfit 339 | statementFour.otherOpCosts = arr1[0].otherOpCosts 340 | statementFour.indirectLabor = arr1[0].indirectLabor 341 | statementFour.legal = arr1[0].legal 342 | statementFour.officeEquip = arr1[0].officeEquip 343 | statementFour.opProfit = arr1[0].opProfit 344 | statementFour.opm = arr1[0].opm 345 | 346 | statementThree.show(statementThree) 347 | } 348 | }) 349 | 350 | //Clear button resets the display and the array carrying over results to the next scenario 351 | clear1.addEventListener("click", ()=>{ 352 | statementStart.show(statementStart) 353 | arr1 = [] 354 | }) 355 | 356 | //Next button displays the object/array used to store the answer selected in scenario 1 357 | next1.addEventListener("click", ()=>{ 358 | statementFour.show(statementFour) 359 | console.log(statementThree) 360 | console.log(statementFour) 361 | localStorage.setItem("Q1Revenue", 100) 362 | console.log(localStorage) 363 | let q1rev = localStorage.getItem("Q1Revenue") 364 | let revenue1 = document.getElementById("revenueNum1") 365 | revenue1.innerText = q1rev 366 | 367 | }) 368 | 369 | //Scenario 2 SUBMIT button event listener with if statements based on the answer selected. Each block pushes the answer chosen to an array then displays income statement based on decision made 370 | scenario2.addEventListener("submit", (e)=>{ 371 | e.preventDefault() 372 | if (scenario2.issue2.value === "2A"){ 373 | // calculation applied to decision 374 | 375 | console.log(statementFour) 376 | console.log(statementFive) 377 | 378 | let increase = statementFive[0].rawMat * .20 379 | statementFive[0].rawMat = increase + statementFive[0].rawMat 380 | 381 | 382 | arr2.push(statementFive[0]) 383 | statementEight.revenue = arr2[0].revenue 384 | statementEight.cogs = arr2[0].cogs 385 | statementEight.rawMat = arr2[0].rawMat 386 | statementEight.freight = arr2[0].freight 387 | statementEight.factoryLabor = arr2[0].factoryLabor 388 | statementEight.storage = arr2[0].storage 389 | statementEight.grossProfit = arr2[0].grossProfit 390 | statementEight.otherOpCosts = arr2[0].otherOpCosts 391 | statementEight.indirectLabor = arr2[0].indirectLabor 392 | statementEight.legal = arr2[0].legal 393 | statementEight.officeEquip = arr2[0].officeEquip 394 | statementEight.opProfit = arr2[0].opProfit 395 | statementEight.opm = arr2[0].opm 396 | 397 | statementFive[0].show(statementFive[0]) 398 | 399 | console.log(statementFour) 400 | console.log(statementFive) 401 | 402 | } else if(scenario2.issue2.value === "2B"){ 403 | // calculation applied to decision 404 | console.log(statementFour) 405 | console.log(statementSix) 406 | let decrease = statementSix[0].storage * .10 407 | statementSix[0].storage = statementSix[0].storage - decrease 408 | 409 | arr2.push(statementSix[0]) 410 | statementEight.revenue = arr2[0].revenue 411 | statementEight.cogs = arr2[0].cogs 412 | statementEight.rawMat = arr2[0].rawMat 413 | statementEight.freight = arr2[0].freight 414 | statementEight.factoryLabor = arr2[0].factoryLabor 415 | statementEight.storage = arr2[0].storage 416 | statementEight.grossProfit = arr2[0].grossProfit 417 | statementEight.otherOpCosts = arr2[0].otherOpCosts 418 | statementEight.indirectLabor = arr2[0].indirectLabor 419 | statementEight.legal = arr2[0].legal 420 | statementEight.officeEquip = arr2[0].officeEquip 421 | statementEight.opProfit = arr2[0].opProfit 422 | statementEight.opm = arr2[0].opm 423 | 424 | statementSix[0].show(statementSix[0]) 425 | 426 | } else if (scenario2.issue2.value === "2C"){ 427 | // calculation applied to decision 428 | let decrease = statementSeven[0].freight * .10 429 | statementSeven[0].freight = statementSeven[0].freight - decrease 430 | 431 | arr2.push(statementSeven[0]) 432 | statementEight.revenue = arr2[0].revenue 433 | statementEight.cogs = arr2[0].cogs 434 | statementEight.rawMat = arr2[0].rawMat 435 | statementEight.freight = arr2[0].freight 436 | statementEight.factoryLabor = arr2[0].factoryLabor 437 | statementEight.storage = arr2[0].storage 438 | statementEight.grossProfit = arr2[0].grossProfit 439 | statementEight.otherOpCosts = arr2[0].otherOpCosts 440 | statementEight.indirectLabor = arr2[0].indirectLabor 441 | statementEight.legal = arr2[0].legal 442 | statementEight.officeEquip = arr2[0].officeEquip 443 | statementEight.opProfit = arr2[0].opProfit 444 | statementEight.opm = arr2[0].opm 445 | 446 | statementSeven[0].show(statementSeven[0]) 447 | } 448 | }) 449 | 450 | clear2.addEventListener("click", ()=>{ 451 | statementFour.show(statementFour) 452 | arr2 = arr1 453 | console.log(arr2) 454 | console.log(statementFour) 455 | console.log(statementFive) 456 | }) 457 | 458 | next2.addEventListener("click", (e)=>{ 459 | e.preventDefault() 460 | statementEight.show(statementEight) 461 | }) 462 | 463 | scenario3.addEventListener("submit", (e)=>{ 464 | e.preventDefault() 465 | if (scenario3.issue3.value === "3A"){ 466 | let increase = statementNine[0].rawMat * .3 467 | statementNine[0].rawMat = increase + statementNine[0].rawMat 468 | let decrease = statementNine[0].freight *.75 469 | statementNine[0].freight = statementNine[0].freight - decrease 470 | 471 | arr3.push(statementNine[0]) 472 | statementTwelve.revenue = arr3[0].revenue 473 | statementTwelve.cogs = arr3[0].cogs 474 | statementTwelve.rawMat = arr3[0].rawMat 475 | statementTwelve.freight = arr3[0].freight 476 | statementTwelve.factoryLabor = arr3[0].factoryLabor 477 | statementTwelve.storage = arr3[0].storage 478 | statementTwelve.grossProfit = arr3[0].grossProfit 479 | statementTwelve.otherOpCosts = arr3[0].otherOpCosts 480 | statementTwelve.indirectLabor = arr3[0].indirectLabor 481 | statementTwelve.legal = arr3[0].legal 482 | statementTwelve.officeEquip = arr3[0].officeEquip 483 | statementTwelve.opProfit = arr3[0].opProfit 484 | statementTwelve.opm = arr3[0].opm 485 | 486 | statementNine[0].show(statementNine[0]) 487 | 488 | } else if(scenario3.issue3.value === "3B"){ 489 | let decrease = statementTen[0].freight *.10 490 | statementTen[0].freight = statementTen[0].freight -decrease 491 | 492 | arr3.push(statementTen[0]) 493 | statementTwelve.revenue = arr3[0].revenue 494 | statementTwelve.cogs = arr3[0].cogs 495 | statementTwelve.rawMat = arr3[0].rawMat 496 | statementTwelve.freight = arr3[0].freight 497 | statementTwelve.factoryLabor = arr3[0].factoryLabor 498 | statementTwelve.storage = arr3[0].storage 499 | statementTwelve.grossProfit = arr3[0].grossProfit 500 | statementTwelve.otherOpCosts = arr3[0].otherOpCosts 501 | statementTwelve.indirectLabor = arr3[0].indirectLabor 502 | statementTwelve.legal = arr3[0].legal 503 | statementTwelve.officeEquip = arr3[0].officeEquip 504 | statementTwelve.opProfit = arr3[0].opProfit 505 | statementTwelve.opm = arr3[0].opm 506 | 507 | statementTen[0].show(statementTen[0]) 508 | 509 | } else if(scenario3.issue3.value === "3C"){ 510 | let decrease = statementEleven[0].freight *.05 511 | statementEleven[0].freight = statementEleven[0].freight - decrease 512 | let increase = statementEleven[0].indirectLabor *.10 513 | statementEleven[0].indirectLabor = statementEleven[0].indirectLabor + increase 514 | 515 | arr3.push(statementEleven[0]) 516 | statementTwelve.revenue = arr3[0].revenue 517 | statementTwelve.cogs = arr3[0].cogs 518 | statementTwelve.rawMat = arr3[0].rawMat 519 | statementTwelve.freight = arr3[0].freight 520 | statementTwelve.factoryLabor = arr3[0].factoryLabor 521 | statementTwelve.storage = arr3[0].storage 522 | statementTwelve.grossProfit = arr3[0].grossProfit 523 | statementTwelve.otherOpCosts = arr3[0].otherOpCosts 524 | statementTwelve.indirectLabor = arr3[0].indirectLabor 525 | statementTwelve.legal = arr3[0].legal 526 | statementTwelve.officeEquip = arr3[0].officeEquip 527 | statementTwelve.opProfit = arr3[0].opProfit 528 | statementTwelve.opm = arr3[0].opm 529 | 530 | statementEleven[0].show(statementEleven[0]) 531 | } 532 | }) 533 | 534 | clear3.addEventListener("click", ()=>{ 535 | statementEight.show(statementEight) 536 | arr3 = arr2 537 | }) 538 | 539 | next3.addEventListener("click", (e)=>{ 540 | e.preventDefault() 541 | statementTwelve.show(statementTwelve) 542 | }) 543 | 544 | scenario4.addEventListener("submit", (e)=>{ 545 | e.preventDefault() 546 | if(scenario4.issue4.value === "4A"){ 547 | let decrease = statementThirteen[0].factoryLabor *.10 548 | statementThirteen[0].factoryLabor = statementThirteen[0].factoryLabor - decrease 549 | let increase = statementThirteen[0].indirectLabor * .05 550 | statementThirteen[0].indirectLabor = statementThirteen[0].indirectLabor + increase 551 | 552 | arr4.push(statementThirteen[0]) 553 | console.log(arr4[0]) 554 | console.log(arr4) 555 | console.log(statementSixteen) 556 | statementSixteen.revenue = arr4[0].revenue 557 | statementSixteen.cogs = arr4[0].cogs 558 | statementSixteen.rawMat = arr4[0].rawMat 559 | statementSixteen.freight = arr4[0].freight 560 | statementSixteen.factoryLabor = arr4[0].factoryLabor 561 | statementSixteen.storage = arr4[0].storage 562 | statementSixteen.grossProfit = arr4[0].grossProfit 563 | statementSixteen.otherOpCosts = arr4[0].otherOpCosts 564 | statementSixteen.indirectLabor = arr4[0].indirectLabor 565 | statementSixteen.legal = arr4[0].legal 566 | statementSixteen.officeEquip = arr4[0].officeEquip 567 | statementSixteen.opProfit = arr4[0].opProfit 568 | statementSixteen.opm = arr4[0].opm 569 | 570 | statementThirteen[0].show(statementThirteen[0]) 571 | 572 | } else if (scenario4.issue4.value === "4B"){ 573 | let increase = statementFourteen[0].factoryLabor * .05 574 | statementFourteen[0].factoryLabor = statementFourteen[0].factoryLabor + increase 575 | 576 | arr4.push(statementFourteen[0]) 577 | statementSixteen.revenue = arr4[0].revenue 578 | statementSixteen.cogs = arr4[0].cogs 579 | statementSixteen.rawMat = arr4[0].rawMat 580 | statementSixteen.freight = arr4[0].freight 581 | statementSixteen.factoryLabor = arr4[0].factoryLabor 582 | statementSixteen.storage = arr4[0].storage 583 | statementSixteen.grossProfit = arr4[0].grossProfit 584 | statementSixteen.otherOpCosts = arr4[0].otherOpCosts 585 | statementSixteen.indirectLabor = arr4[0].indirectLabor 586 | statementSixteen.legal = arr4[0].legal 587 | statementSixteen.officeEquip = arr4[0].officeEquip 588 | statementSixteen.opProfit = arr4[0].opProfit 589 | statementSixteen.opm = arr4[0].opm 590 | 591 | statementFourteen[0].show(statementFourteen[0]) 592 | 593 | }else if (scenario4.issue4.value === "4C"){ 594 | let increase = statementFifteen[0].indirectLabor *.10 595 | statementFifteen[0].indirectLabor = statementFifteen[0].indirectLabor + increase 596 | let decrease = statementFifteen[0].factoryLabor * .10 597 | statementFifteen[0].factoryLabor = statementFifteen[0].factoryLabor - decrease 598 | 599 | arr4.push(statementFifteen[0]) 600 | statementSixteen.revenue = arr4[0].revenue 601 | statementSixteen.cogs = arr4[0].cogs 602 | statementSixteen.rawMat = arr4[0].rawMat 603 | statementSixteen.freight = arr4[0].freight 604 | statementSixteen.factoryLabor = arr4[0].factoryLabor 605 | statementSixteen.storage = arr4[0].storage 606 | statementSixteen.grossProfit = arr4[0].grossProfit 607 | statementSixteen.otherOpCosts = arr4[0].otherOpCosts 608 | statementSixteen.indirectLabor = arr4[0].indirectLabor 609 | statementSixteen.legal = arr4[0].legal 610 | statementSixteen.officeEquip = arr4[0].officeEquip 611 | statementSixteen.opProfit = arr4[0].opProfit 612 | statementSixteen.opm = arr4[0].opm 613 | 614 | statementFifteen[0].show(statementFifteen[0]) 615 | } 616 | }) 617 | 618 | clear4.addEventListener("click", ()=>{ 619 | statementTwelve.show(statementTwelve) 620 | arr4 = arr3 621 | }) 622 | 623 | finish.addEventListener("click", (e)=>{ 624 | e.preventDefault() 625 | statementSixteen.show(statementSixteen) 626 | console.log(statementStart) 627 | console.log(statementFour) 628 | console.log(statementEight) 629 | console.log(statementTwelve) 630 | console.log(statementSixteen) 631 | 632 | //If statement to determine win/loss state 633 | if (statementSixteen.opm > statementStart.opm){ 634 | // results.innerHTML = "

Congratulations, your operating margin is higher! You will receive a $10,000 bonus.

" 635 | alert("Congratulations, your operating margin is higher than 11.76%. You will receive a $10,000 bonus!") 636 | console.log("you win!") 637 | console.log(statementStart) 638 | console.log(statementFour) 639 | console.log(statementEight) 640 | console.log(statementTwelve) 641 | console.log(statementSixteen) 642 | } else { 643 | // results.innerHTML = "

Sorry, due to poor performance the operating margin is lower than 11.76%, therefore your employment is hereby terminated. Report to HR immediately.

" 644 | alert("Sorry, due to poor performance the operating margin is lower than 11.76%, therefore your employment is hereby terminated. Report to HR immediately.") 645 | console.log("you lose!") 646 | console.log(statementStart) 647 | console.log(statementFour) 648 | console.log(statementEight) 649 | console.log(statementTwelve) 650 | console.log(statementSixteen) 651 | } 652 | }) 653 | 654 | 655 | resetBtn.addEventListener("click", ()=>{ 656 | location.reload() 657 | }) 658 | 659 | //TO DO: PUT A LOOP SOMEWHERE IN EACH ANSWER SO THE CALCULATION IS ONLY DONE ONCE. CALCULATION CONTINUES TO EXECUTE AND ACCUMULATE RESULTS EVERY TIME YOU SELECT ANSWERS WITHIN SCENARIO 2, 3, & 4. 660 | 661 | 662 | --------------------------------------------------------------------------------