From be93e9590637f320f12ef66a21f1e4c554a2a549 Mon Sep 17 00:00:00 2001 From: Kartik Jevaji <9121718+nitrotap@users.noreply.github.com> Date: Tue, 20 Jun 2023 04:44:00 -0600 Subject: [PATCH] finishing edu page and styles --- client/src/app/education/education.page.html | 1081 ++++++++++------- client/src/app/education/education.page.scss | 182 +-- .../src/app/education/education.page.spec.ts | 34 +- client/src/app/education/education.page.ts | 105 +- client/src/app/footer/footer.page.scss | 2 +- .../src/app/strategies/strategies.page.html | 4 +- 6 files changed, 848 insertions(+), 560 deletions(-) diff --git a/client/src/app/education/education.page.html b/client/src/app/education/education.page.html index f03f487..8ee790d 100644 --- a/client/src/app/education/education.page.html +++ b/client/src/app/education/education.page.html @@ -1,445 +1,638 @@ - - - Learn About Cognitive Load - - - - - - - - - - - - What is Cognitive Load? - - - Definition - - - - Cognitive Load is the mental effort required to complete a - task. - - - - - - - - - What is Brain Lift? - - Find Out Here - - - -

- Measure and track the mental effort to complete your tasks -

- Brain Lift helps users understand how their cognitive load affects their learning and performance. -
- Use the NASA Task Load Index to measure and track your cognitive load for different tasks. - - - - - - - - - - Three Types of Cognitive Load - - - - - Intrinsic - - - - Extraneous - - - - Germane - - - - - - - - - - - - - - - Left facing head with gears - - Intrinsic - - - -

Intrinsic Cognitive Load Definition

-
  • - The inherent complexity of a given task -
    • -
    -
  • - Remains fairly constant -
    • -
    -     -     -     -

    Intrinsic Load

    - Examples - - - -

    - Inherent Complexity -

    -
  • - Weightlifting – lifting a weight -
    • -
  • - Washing Dishes – picking up plates and glassware, not breaking anything -
    • -
    -
  • - Driving – focusing on traffic, arriving safely, not getting distracted or lost -
    • -
    -
  • - PC RAM – RAM required to do a task (e.g. Chrome needs 1GB RAM) -
    • -     -     -     -     -     -     -     - - - - - - - - - Left facing head with gears - - Extraneous - - - -

    Extraneous Load Definition

    -
  • - Mental effort to process things that interfere with your ability to complete the task that are - irrelevant - to the task -
    • -
    -
  • - Irrelevant to task at hand -
    • -
    -
  • - Mental illness or other disabilities can interfere with the ability to complete tasks. Thus, the - illness - or disability adds to an individual’s Extraneous load, and increases the overall mental effort - required to - complete a task. -
    • -     -     -     -
    - - - -

    - Extraneous Load -

    -     - -     - Three categories - - - -
      -
    1. - Mental Loads - (mental illness symptoms, medications, symptoms of disability) -
      2. -
      -
    2. - Physical Loads – being sick, hungry, thirsty, in pain, medications -
      3. -
      -
    3. - Environmental Loads – Raining or snowing, too hot or cold, loud noises -
      4. -
    -     -     -     -     - - - - - Mental Load - - Examples - - - -
  • - Illness Symptoms -
    • -
    -
  • - Mood (feeling very sad or very happy) -
    • -
    -
  • - Mood changes (rollercoaster days) -
    • -
    -
  • - Visual hallucinations - shimmering, past memory overlay, difficulty seeing properly, - not seeing things that are there -
    • -
    -
  • - Auditory hallucinations - voices, indistinct or command -
    • -
  • - Intrusive thoughts - can't focus on conversations, song playing only in your head but too loud to hear - anything else -
    • -
    -
  • - Forgetfulness - issues with short term processing (having repeated conversations, forgetting important - tasks) - may be a symptom -
    • -
    -
  • - Medications - forgetting to take them, finding the right combination -
    • -
    -
  • - Brain fog, difficulty with speech -
    • -     -     -     - - - Physical Load - - Examples - - - -
  • - Being sick (runny nose, headache, coughing) -
    • -
    -
  • - Cravings for substances - cigarettes, weed, alcohol, other drugs -
    • -
    -
  • - Hungry/thirsty -
    • -
    -
  • - Extreme fatigue -
    • -
    -
  • - Pain -
    • -
    -
  • - Double vision - making it hard to see -
    • -
    -
  • - Medications (excessive sweating, akathisia) -
    • -     -     -     - - - - Environmental Load - - - Examples - - - -
  • - Raining or snowing -
    • -
    -
  • - Loud external noises (like a dog barking loudly or child screaming) -
    • -
    -
  • - Temperature discomfort (feeling like it's too cold or hot) -
    • -     -     -     -

    - Learn about strategies to deal with extraneous load -     -     -     -     - - - - - - - - - Silhouette of head with keyhole - - Germane - - - -

    Germane Cognitive Load Definition

    -
  • - Mental effort related to helping yourself complete tasks -
    • -
    -
  • - Mental effort required to understand and retain information -
    • -     -     -     -

    Germane Load

    - - How can we optimize our germane load to complement our extraneous loads? - -
    - Examples - - - -
  • - Weight-lifting and Exercise - keep it simple -
    • -
    -
  • - Doing dishes – use other senses to determine clean -
    • -
    -
  • - Driving – take a quiz or something to measure daily ability -
    • -
    -
  • - PC RAM -write efficient code to use less RAM -
    • -     -     -     -     -     -     -     - - - - - - - - - Silhouette of head with circuitry - - NASA-TLX - - - -

    What is the Task Load Index?

    - - The NASA Task Load Index (NASA-TLX) was created in 1980 by a team of researchers led by Sandra G. Hart - at - the NASA Ames Research Center. The rating scale was designed to assess the perceived workload and - mental - demands of a task. - -     -     -     -     - - - NASA Task Load Index - The NASA TLX has six questions - - - -
      -
      -
    1. - How much mental and perceptual activity was required? Was the task easy or demanding, simple or - complex? -
      2. -
      -
    2. - How much physical activity was required? Was the task easy or demanding, slack or strenuous? -
      3. -
      -
    3. - How much time pressure did you feel due to the pace at which the tasks or task elements occurred? - Was - the pace slow or rapid? -
      4. -
      -
    4. - How successful were you in performing the task? How satisfied were you with your performance? -
      5. -
      -
    5. - How hard did you have to work (mentally and physically) to accomplish your level of performance? -
      6. -
      -
    6. - How irritated, stressed, and annoyed versus content, relaxed, and complacent did you feel during - the - task? -
      7. -
    -     -     -     -     -     - - Start measuring your cognitive load -     -     -     - - + + + Cognitive Load + + + + + +

    Cognitive Load

    +     + + + + +
    + + + + What is Cognitive Load? + + + + + + Cognitive Load is the mental effort required to + complete a + task. + + + + There are three types of Cognitive Load: + + What are the types? + + + +
      +
    1. + Intrinsic +
      2. +
    2. + Extraneous +
      3. +
    3. + Germane +
      4. +
    +     + +     +     + + +     +     + +
    +     + +
    + + + Brain Lift + + + Measure and track the mental effort to complete your tasks + + + What it Does + + + + Brain Lift helps users understand how their cognitive load affects their learning + and + performance. + + + + How it Works + + + + Brain Lift uses the NASA Task Load Index to measure and track your cognitive load + for + different + tasks. + + + + + + +
    +     +     +     + + + + Three Types of Cognitive Load + + + + + + Intrinsic + + + + + Extraneous + + + + + Germane + + + + + + + + + + + + + + + +

    Intrinsic Cognitive Load

    +     + + The inherent complexity of a given task + + + Left facing head with gears + + +

    Attributes

    +
  • + Remains fairly constant +
    • +
  • Identified by all processes that incorporate the task itself
    • + +     + + Examples + Inherent Complexity + + + Weight-Lifting + + + +
  • + Weightlifting – lifting a weight +
    • +     +     +     + Washing Dishes + + + +
  • + Washing Dishes – picking up plates and glassware, not breaking anything +
    • +     +     +     + Driving + + + + Driving – focusing on traffic, arriving safely, not getting distracted or lost + + + + + PC RAM + + + + PC RAM – RAM required to do a task (e.g. Chrome needs 1GB RAM) + + + +     + +     + +     +     +     + + + + + + + + +

    Extraneous Cognitive Load

    +     + + Mental effort spent on things that are irrelevant to the task at hand + + person with multiple screen icons + + +

    Attributes

    +
  • + Includes anything that interferes with your ability to perform the task +
    • +
  • Mental illness or other disabilities can interfere with the ability to complete + tasks. +
    • +
  • + The + illness + or disability adds to an individual’s Extraneous load, and increases the overall + mental effort + required to + complete a task. +
    • +
  • + Can be split up into three sub-categories - Mental, Physical, and Environmental +
    • + +     + + Categories + Irrelevant Efforts + + + Mental Load + + + +
  • + Illness Symptoms +
    • +
    +
  • + Mood (feeling very sad or very happy) +
    • +
    +
  • + Mood changes (rollercoaster days) +
    • +
    +
  • + Visual hallucinations - shimmering, past memory overlay, difficulty seeing + properly, + not seeing things that are there +
    • +
    +
  • + Auditory hallucinations - voices, indistinct or command +
    • +
  • + Intrusive thoughts - can't focus on conversations, song playing only in your + head + but too loud to hear + anything else +
    • +
    +
  • + Forgetfulness - issues with short term processing (having repeated + conversations, + forgetting important + tasks) - may be a symptom +
    • +
    +
  • + Medications - forgetting to take them, finding the right combination +
    • +
    +
  • + Brain fog, difficulty with speech +
    • +     +     +     + Physical Load + + + +
  • + Being sick (runny nose, headache, coughing) +
    • +
    +
  • + Cravings for substances - cigarettes, weed, alcohol, other drugs +
    • +
    +
  • + Hungry/thirsty +
    • +
    +
  • + Extreme fatigue +
    • +
    +
  • + Pain +
    • +
    +
  • + Double vision - making it hard to see +
    • +
    +
  • + Medications (excessive sweating, akathisia) +
    • +     + +     +     + Environmental + + + +
  • + Raining or snowing +
    • +
    +
  • + Loud external noises (like a dog barking loudly or child screaming) +
    • +
    +
  • + Temperature discomfort (feeling like it's too cold or hot) +
    • +     +     +     +     + +     + +     +     +     + + + + + + + + + +

    Germane Cognitive Load

    +     + + Mental effort dedicated to tasks associated with the task at hand + + person with multiple screen icons + + +

    Attributes

    +
  • + Includes any associated tasks or effort required to complete the task, but not the intrinsic + load +
    • +
  • Things that need to get done before or after a task to ensure it's completed properly +
    • +
  • + Optimizing our germane loads allows us to make more room for extraneous loads, helping us + complete our task. +
    • +     + + Examples + Relevant Efforts + + Weight-Lifting and Exercise + + + +
  • + Keep it simple by changing your goals to be more incremental. +
    • +
  • + Going to the gym requires many germane tasks, like getting a membership, driving + or walking there, and being in a crowd. +
    • +
  • + Changing your goal to a 30 minute walk can help you meet your exercise goal with + less germane load. +
    • +     +     +     + + Doing Dishes + + + +
  • + Doing the dishes involves the germane tasks of getting the dishes ready and + putting the dishes away. +
    • +
  • + Making this task easier can involve breaking up the task. Try to set a timer for + ten minutes and only perform the task for small amounts of time. +
    • +
  • + If you sometimes break glassware, try removing all glassware from the sink and + keep it separate until the end. +
    • +
  • + If you have difficulty determining if something is clean, try using your other + senses, like touch, to determine if it's clean. +
    • +     + +     +     + Driving + + + +
  • + Driving requires quick reaction times, patience, and focus. +
    • +
  • + While human autopilot can help ease the cognitive load of driving, the activity + is susceptible to high extraneous loads, like traffic or weather conditions. +
    • +
  • + To manage the germane load associated with driving, you can try to take a quiz + designed to test your reaction times or memory. +
    • +
  • + If you need to complete many tasks, like going to the pharmacy and getting + groceries, try splitting them up into separate driving tasks. +
    • + +     +     +     + PC RAM + + + +
  • + In the example of PC RAM, optimizing the germane load would involve writing more + efficient code to use less RAM. +
    • +     +     +     + +     + +     + +     +     +     + + + + + + + + + +

    NASA Task Load Index

    +     + + Measurement tool for cognitive load + + Silhouette of head with circuitry + + +

    Details

    +
  • + The NASA Task Load Index (NASA-TLX) was created in 1980 by a team of researchers led + by Sandra G. Hart + at + the NASA Ames Research Center. +
    • +
  • The rating scale was designed to assess the perceived + workload and + mental + demands of a task. +
    • +
  • + The NASA TLX has six questions, and keeping the questions in mind can help us complete tasks + efficiently. +
    • +     + + Questions + Choose a Question + + All Questions + + + +
      +
    1. + How much mental and perceptual activity was required? Was the task easy or + demanding, simple or + complex? +
      2. +
      +
    2. + How much physical activity was required? Was the task easy or demanding, + slack or strenuous? +
      3. +
      +
    3. + How much time pressure did you feel due to the pace at which the tasks or + task elements occurred? + Was + the pace slow or rapid? +
      4. +
      +
    4. + How successful were you in performing the task? How satisfied were you with + your performance? +
      5. +
      +
    5. + How hard did you have to work (mentally and physically) to accomplish your + level of performance? +
      6. +
      +
    6. + How irritated, stressed, and annoyed versus content, relaxed, and complacent + did you feel during + the + task? +
      7. +
    +     +     +     + + Mental Load + + + +
  • + How much mental and perceptual activity was required? Was the task easy or + demanding, simple or + complex? +
    • +     +     +     + + + Physical Load + + + +
  • + How much physical activity was required? Was the task easy or demanding, + slack or strenuous? +
    • +     +     +     + Time (Temporal) Load + + + +
  • + How much time pressure did you feel due to the pace at which the tasks or + task elements occurred? + Was + the pace slow or rapid? +
    • +     +     +     + + Personal Performance + + + +
  • + How successful were you in performing the task? How satisfied were you with + your performance? +
    • +     +     +     + + Personal Effort + + + +
  • + How hard did you have to work (mentally and physically) to accomplish your + level of performance? +
    • +     +     +     + + Stress Load + + + +
  • + How irritated, stressed, and annoyed versus content, relaxed, and complacent + did you feel during + the + task? +
    • +     +     +     + + +     + +     + +     +     +     + + +     \ No newline at end of file diff --git a/client/src/app/education/education.page.scss b/client/src/app/education/education.page.scss index 68712e5..9cc7adc 100644 --- a/client/src/app/education/education.page.scss +++ b/client/src/app/education/education.page.scss @@ -1,73 +1,109 @@ - - -/* Card Styles */ - -ion-card, ion-title, ion-card-subtitle { - --ion-item-border-color: #025E73; - --ion-item-background: #80A7BF; - // --ion-text-color: #012E40; - overflow: visible; - // color: #025E73; - text-align: center; -} - -li { - text-align: left; -} - -ion-img { - width: 30%; -} - -ion-button { - --ion-item-border-color: #025E73; - --ion-item-background: #006c67; - --ion-text-color: #ffffff; - margin-bottom: 35px 50px auto; -} - -ion-img::part(image) { - display: block; - width: 50%; - height: 35%; -} - -.button.button-solid.ion-activatable.ion-focusable.hydrated { - --ion-item-background: #006c67; - --ion-text-color: #ffffff; - } - -#hover-trigger:hover { - width: 125px; - height: 50px; - margin: auto; - border: solid 6px #D1A934; - outline: solid 6px #006c67; -} - -ion-content { - // --background: url('/assets/leafwater.jpeg') no-repeat 100% 100%; - // text-align: center; - display: flex; - justify-content: center; -} - -ion-item, ion-card, ion-toolbar, ion-card-content, ion-title { - --ion-item-background: rgb(255, 255, 255, .93); - // width: 80%; - // margin-left: 10%; -} - -/* Footer Styles */ - -ion-footer { - margin-top: 50px; - padding: 10px; -} - -ion-footer p { - font-size: 16px; - color: #ffffff; -} - - +/* Card Styles */ + +ion-card, ion-title, ion-card-subtitle { + --ion-item-border-color: #025E73; + //--ion-item-background: #80A7BF; + // --ion-text-color: #012E40; + overflow: visible; + // color: #025E73; + text-align: center; +} + +li { + text-align: left; +} + +ion-img { + width: 30%; +} + +ion-button { + --ion-item-border-color: #025E73; + --ion-item-background: #006c67; + --ion-text-color: #ffffff; + margin-bottom: 35px 50px auto; +} + +ion-img::part(image) { + display: block; + width: 50%; + height: 35%; +} + +.button.button-solid.ion-activatable.ion-focusable.hydrated { + --ion-item-background: #006c67; + --ion-text-color: #ffffff; +} + +.hover-trigger:hover { + border: solid 6px #D1A934; + outline: solid 6px #006c67; +} + +ion-content { + // --background: url('/assets/leafwater.jpeg') no-repeat 100% 100%; + // text-align: center; + display: flex; + justify-content: center; +} + +ion-item, ion-card, ion-toolbar, ion-card-content, ion-title { + //--ion-item-background: rgb(255, 255, 255, .93); + //width: 95vw; + // margin-left: 10%; +} + +/* Footer Styles */ + +ion-footer { + margin-top: 50px; + padding: 10px; +} + +ion-footer p { + font-size: 16px; + color: #ffffff; +} + +.intrinsic { + background-color: rgb(110, 150, 177); +} + +.extraneous { + background-color: rgb(46, 151, 149); +} + +.germane { + background-color: rgb(208, 188, 165); +} + + +ion-card { + animation-duration: 1s; + animation-name: slidein; +} + +img { + @media (prefers-color-scheme: dark) { + background-color: #ffffff; + } + +} + +@keyframes slidein { + from { + margin-top: 100%; + length: 300%; + } + + to { + margin-top: 0%; + length: 100%; + } +} + +@media (prefers-color-scheme: dark) { + :root { + /* dark mode variables go here */ + } +} diff --git a/client/src/app/education/education.page.spec.ts b/client/src/app/education/education.page.spec.ts index c7514d1..4d0522e 100644 --- a/client/src/app/education/education.page.spec.ts +++ b/client/src/app/education/education.page.spec.ts @@ -1,17 +1,17 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { EducationPage } from './education.page'; - -describe('EducationPage', () => { - let component: EducationPage; - let fixture: ComponentFixture; - - beforeEach(async(() => { - fixture = TestBed.createComponent(EducationPage); - component = fixture.componentInstance; - fixture.detectChanges(); - })); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); +import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {EducationPage} from './education.page'; + +describe('EducationPage', () => { + let component: EducationPage; + let fixture: ComponentFixture; + + beforeEach((() => { + fixture = TestBed.createComponent(EducationPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/client/src/app/education/education.page.ts b/client/src/app/education/education.page.ts index 7add74e..0f96569 100644 --- a/client/src/app/education/education.page.ts +++ b/client/src/app/education/education.page.ts @@ -1,23 +1,82 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -@Component({ - selector: 'app-education', - templateUrl: './education.page.html', - styleUrls: ['./education.page.scss'], -}) -export class EducationPage implements OnInit { - - constructor(private router: Router) { } - - goToStrategies() { - this.router.navigateByUrl('/strategies') - } - - goToMeasure() { - this.router.navigateByUrl('/measure') - } - - ngOnInit() { - } - -} +import {Component, OnInit} from '@angular/core'; +import {Router} from '@angular/router'; + +@Component({ + selector: 'app-education', + templateUrl: './education.page.html', + styleUrls: ['./education.page.scss'], +}) +export class EducationPage implements OnInit { + + constructor(private router: Router) { + } + + goToStrategies() { + this.router.navigateByUrl('/strategies') + } + + goToMeasure() { + this.router.navigateByUrl('/measure') + } + + ngOnInit() { + } + + public currentLoad: string = 'intrinsic'; + public gridColor: string = 'rgb(48,151,116)'; + + cogLoad(state: string): void { + + this.currentLoad = state; + + let intrinsic = 'rgb(48,151,116)' + let extraneous = 'rgb(23,122,121)' + let germane = 'rgb(12, 85, 96)' + + switch (this.currentLoad) { + case 'none': + this.currentLoad = 'intrinsic'; + this.gridColor = intrinsic; + + break; + case 'i': + this.currentLoad = 'intrinsic'; + this.gridColor = intrinsic; + + break; + case 'e': + this.currentLoad = 'extraneous'; + this.gridColor = extraneous; + + break; + case 'g': + this.currentLoad = 'germane'; + this.gridColor = germane; + + break; + default: + this.currentLoad = 'intrinsic'; + this.gridColor = intrinsic; + + break; + } + + + // switch (this.currentLoad) { + // case 'none': + // this.currentLoad = 'intrinsic'; + // break; + // case 'intrinsic': + // this.currentLoad = 'extraneous'; + // break; + // case 'extraneous': + // this.currentLoad = 'germane'; + // break; + // default: + // this.currentLoad = 'none'; + // break; + // } + } + + +} diff --git a/client/src/app/footer/footer.page.scss b/client/src/app/footer/footer.page.scss index 76a4b58..25995f0 100644 --- a/client/src/app/footer/footer.page.scss +++ b/client/src/app/footer/footer.page.scss @@ -8,6 +8,6 @@ ion-footer { ion-footer p { font-size: 12px; - color: #888; + // color: #888; } \ No newline at end of file diff --git a/client/src/app/strategies/strategies.page.html b/client/src/app/strategies/strategies.page.html index bd01fbf..ac64e5a 100644 --- a/client/src/app/strategies/strategies.page.html +++ b/client/src/app/strategies/strategies.page.html @@ -382,7 +382,7 @@ - +
    @@ -550,7 +550,7 @@
    Start with the side of your hand.
    - +