Switched Flag.tsx to use Flag.json as it's source for content.
UI for red flags was changed to accordions as there were difficulties creating a dynamic
amount of modal dialogs.

.gitignore 2

+node_modules/
+public/
+ios/
+android/
+build/

android/.gitignore

-# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
-
-# Built application files
-*.apk
-*.aar
-*.ap_
-*.aab
-
-# Files for the ART/Dalvik VM
-*.dex
-
-# Java class files
-*.class
-
-# Generated files
-bin/
-gen/
-out/
-#  Uncomment the following line in case you need and you don't have the release build type files in your app
-# release/
-
-# Gradle files
-.gradle/
-build/
-
-# Local configuration file (sdk path, etc)
-local.properties
-
-# Proguard folder generated by Eclipse
-proguard/
-
-# Log Files
-*.log
-
-# Android Studio Navigation editor temp files
-.navigation/
-
-# Android Studio captures folder
-captures/
-
-# IntelliJ
-*.iml
-.idea/workspace.xml
-.idea/tasks.xml
-.idea/gradle.xml
-.idea/assetWizardSettings.xml
-.idea/dictionaries
-.idea/libraries
-# Android Studio 3 in .gitignore file.
-.idea/caches
-.idea/modules.xml
-# Comment next line if keeping position of elements in Navigation Editor is relevant for you
-.idea/navEditor.xml
-
-# Keystore files
-# Uncomment the following lines if you do not want to check your keystore files in.
-#*.jks
-#*.keystore
-
-# External native build folder generated in Android Studio 2.2 and later
-.externalNativeBuild
-.cxx/
-
-# Google Services (e.g. APIs or Firebase)
-# google-services.json
-
-# Freeline
-freeline.py
-freeline/
-freeline_project_description.json
-
-# fastlane
-fastlane/report.xml
-fastlane/Preview.html
-fastlane/screenshots
-fastlane/test_output
-fastlane/readme.md
-
-# Version control
-vcs.xml
-
-# lint
-lint/intermediates/
-lint/generated/
-lint/outputs/
-lint/tmp/
-# lint/reports/
-
-# Android Profiling
-*.hprof
-
-# Cordova plugins for Capacitor
-capacitor-cordova-android-plugins
-
-# Copied web assets
-app/src/main/assets/public
-
-# Generated Config files
-app/src/main/assets/capacitor.config.json
-app/src/main/assets/capacitor.plugins.json
-app/src/main/res/xml/config.xml

android/.idea/jarRepositories.xml

-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="RemoteRepositoriesConfiguration">
-    <remote-repository>
-      <option name="id" value="central" />
-      <option name="name" value="Maven Central repository" />
-      <option name="url" value="https://repo1.maven.org/maven2" />
-    </remote-repository>
-    <remote-repository>
-      <option name="id" value="jboss.community" />
-      <option name="name" value="JBoss Community repository" />
-      <option name="url" value="https://repository.jboss.org/nexus/content/repositories/public/" />
-    </remote-repository>
-    <remote-repository>
-      <option name="id" value="MavenRepo" />
-      <option name="name" value="MavenRepo" />
-      <option name="url" value="https://repo.maven.apache.org/maven2/" />
-    </remote-repository>
-    <remote-repository>
-      <option name="id" value="Google" />
-      <option name="name" value="Google" />
-      <option name="url" value="https://dl.google.com/dl/android/maven2/" />
-    </remote-repository>
-  </component>
-</project>

android/app/build.gradle

-apply plugin: 'com.android.application'
-
-android {
-    compileSdkVersion rootProject.ext.compileSdkVersion
-    defaultConfig {
-        applicationId "io.ionic.starter"
-        minSdkVersion rootProject.ext.minSdkVersion
-        targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
-        versionName "1.0"
-        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
-        aaptOptions {
-             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
-             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
-            ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
-        }
-    }
-    buildTypes {
-        release {
-            minifyEnabled false
-            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
-        }
-    }
-}
-
-repositories {
-    flatDir{
-        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
-    }
-}
-
-dependencies {
-    implementation fileTree(include: ['*.jar'], dir: 'libs')
-    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
-    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
-    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
-    implementation project(':capacitor-android')
-    testImplementation "junit:junit:$junitVersion"
-    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
-    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
-    implementation project(':capacitor-cordova-android-plugins')
-}
-
-apply from: 'capacitor.build.gradle'
-
-try {
-    def servicesJSON = file('google-services.json')
-    if (servicesJSON.text) {
-        apply plugin: 'com.google.gms.google-services'
-    }
-} catch(Exception e) {
-    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
-}

android/app/proguard-rules.pro

-# Add project specific ProGuard rules here.
-# You can control the set of applied configuration files using the
-# proguardFiles setting in build.gradle.
-#
-# For more details, see
-#   http://developer.android.com/guide/developing/tools/proguard.html
-
-# If your project uses WebView with JS, uncomment the following
-# and specify the fully qualified class name to the JavaScript interface
-# class:
-#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
-#   public *;
-#}
-
-# Uncomment this to preserve the line number information for
-# debugging stack traces.
-#-keepattributes SourceFile,LineNumberTable
-
-# If you keep the line number information, uncomment this to
-# hide the original source file name.
-#-renamesourcefileattribute SourceFile

android/app/src/main/AndroidManifest.xml

-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="io.ionic.starter">
-
-    <application
-        android:allowBackup="true"
-        android:icon="@mipmap/ic_launcher"
-        android:label="@string/app_name"
-        android:roundIcon="@mipmap/ic_launcher_round"
-        android:supportsRtl="true"
-        android:theme="@style/AppTheme">
-
-        <activity
-            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
-            android:name="io.ionic.starter.MainActivity"
-            android:label="@string/title_activity_main"
-            android:theme="@style/AppTheme.NoActionBarLaunch"
-            android:launchMode="singleTask"
-            android:exported="true">
-
-            <intent-filter>
-                <action android:name="android.intent.action.MAIN" />
-                <category android:name="android.intent.category.LAUNCHER" />
-            </intent-filter>
-
-        </activity>
-
-        <provider
-            android:name="androidx.core.content.FileProvider"
-            android:authorities="${applicationId}.fileprovider"
-            android:exported="false"
-            android:grantUriPermissions="true">
-            <meta-data
-                android:name="android.support.FILE_PROVIDER_PATHS"
-                android:resource="@xml/file_paths"></meta-data>
-        </provider>
-    </application>
-
-    <!-- Permissions -->
-
-    <uses-permission android:name="android.permission.INTERNET" />
-</manifest>

android/gradle.properties

-# Project-wide Gradle settings.
-
-# IDE (e.g. Android Studio) users:
-# Gradle settings configured through the IDE *will override*
-# any settings specified in this file.
-
-# For more details on how to configure your build environment visit
-# http://www.gradle.org/docs/current/userguide/build_environment.html
-
-# Specifies the JVM arguments used for the daemon process.
-# The setting is particularly useful for tweaking memory settings.
-org.gradle.jvmargs=-Xmx1536m
-
-# When configured, Gradle will run in incubating parallel mode.
-# This option should only be used with decoupled projects. More details, visit
-# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
-# org.gradle.parallel=true
-
-# AndroidX package structure to make it clearer which packages are bundled with the
-# Android operating system, and which are packaged with your app's APK
-# https://developer.android.com/topic/libraries/support-library/androidx-rn
-android.useAndroidX=true
-# Automatically convert third-party libraries to use AndroidX
-android.enableJetifier=true

android/gradlew.bat

-@rem
-@rem Copyright 2015 the original author or authors.
-@rem
-@rem Licensed under the Apache License, Version 2.0 (the "License");
-@rem you may not use this file except in compliance with the License.
-@rem You may obtain a copy of the License at
-@rem
-@rem      https://www.apache.org/licenses/LICENSE-2.0
-@rem
-@rem Unless required by applicable law or agreed to in writing, software
-@rem distributed under the License is distributed on an "AS IS" BASIS,
-@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-@rem See the License for the specific language governing permissions and
-@rem limitations under the License.
-@rem
-
-@if "%DEBUG%" == "" @echo off
-@rem ##########################################################################
-@rem
-@rem  Gradle startup script for Windows
-@rem
-@rem ##########################################################################
-
-@rem Set local scope for the variables with windows NT shell
-if "%OS%"=="Windows_NT" setlocal
-
-set DIRNAME=%~dp0
-if "%DIRNAME%" == "" set DIRNAME=.
-set APP_BASE_NAME=%~n0
-set APP_HOME=%DIRNAME%
-
-@rem Resolve any "." and ".." in APP_HOME to make it shorter.
-for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
-
-@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
-
-@rem Find java.exe
-if defined JAVA_HOME goto findJavaFromJavaHome
-
-set JAVA_EXE=java.exe
-%JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto execute
-
-echo.
-echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
-
-goto fail
-
-:findJavaFromJavaHome
-set JAVA_HOME=%JAVA_HOME:"=%
-set JAVA_EXE=%JAVA_HOME%/bin/java.exe
-
-if exist "%JAVA_EXE%" goto execute
-
-echo.
-echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
-
-goto fail
-
-:execute
-@rem Setup the command line
-
-set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
-
-
-@rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
-
-:end
-@rem End local scope for the variables with windows NT shell
-if "%ERRORLEVEL%"=="0" goto mainEnd
-
-:fail
-rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
-rem the _cmd.exe /c_ return code!
-if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
-exit /b 1
-
-:mainEnd
-if "%OS%"=="Windows_NT" endlocal
-
-:omega

build/asset-manifest.json

 {
   "files": {
+<<<<<<< HEAD
+    "main.css": "/static/css/main.30c9193e.css",
+    "main.js": "/static/js/main.a0b94822.js",
+    "static/js/738.aba3ba7d.chunk.js": "/static/js/738.aba3ba7d.chunk.js",
+=======
     "main.css": "/static/css/main.3f863b78.css",
-    "main.js": "/static/js/main.5c3034d0.js",
+    "main.js": "/static/js/main.05353c61.js",
     "static/js/738.23d458d2.chunk.js": "/static/js/738.23d458d2.chunk.js",
+>>>>>>> JantonyBranch
     "static/js/372.1940d375.chunk.js": "/static/js/372.1940d375.chunk.js",
     "static/js/856.c55f21fe.chunk.js": "/static/js/856.c55f21fe.chunk.js",
-    "static/js/851.b02dec88.chunk.js": "/static/js/851.b02dec88.chunk.js",
+    "static/js/851.7ada53df.chunk.js": "/static/js/851.7ada53df.chunk.js",
     "static/js/22.7ec1dda8.chunk.js": "/static/js/22.7ec1dda8.chunk.js",
     "static/js/272.fc222ae9.chunk.js": "/static/js/272.fc222ae9.chunk.js",
     "static/js/841.bef26980.chunk.js": "/static/js/841.bef26980.chunk.js",
-    "static/js/186.a076517b.chunk.js": "/static/js/186.a076517b.chunk.js",
+    "static/js/186.09c3ea27.chunk.js": "/static/js/186.09c3ea27.chunk.js",
     "static/js/377.31684c30.chunk.js": "/static/js/377.31684c30.chunk.js",
-    "static/media/moti1.jpeg": "/static/media/moti1.9e77264ce56094743da3.jpeg",
     "service-worker.js": "/service-worker.js",
     "index.html": "/index.html",
+<<<<<<< HEAD
+    "main.30c9193e.css.map": "/static/css/main.30c9193e.css.map",
+    "main.a0b94822.js.map": "/static/js/main.a0b94822.js.map",
+    "738.aba3ba7d.chunk.js.map": "/static/js/738.aba3ba7d.chunk.js.map",
+=======
     "main.3f863b78.css.map": "/static/css/main.3f863b78.css.map",
-    "main.5c3034d0.js.map": "/static/js/main.5c3034d0.js.map",
+    "main.05353c61.js.map": "/static/js/main.05353c61.js.map",
     "738.23d458d2.chunk.js.map": "/static/js/738.23d458d2.chunk.js.map",
+>>>>>>> JantonyBranch
     "372.1940d375.chunk.js.map": "/static/js/372.1940d375.chunk.js.map",
     "856.c55f21fe.chunk.js.map": "/static/js/856.c55f21fe.chunk.js.map",
-    "851.b02dec88.chunk.js.map": "/static/js/851.b02dec88.chunk.js.map",
+    "851.7ada53df.chunk.js.map": "/static/js/851.7ada53df.chunk.js.map",
     "22.7ec1dda8.chunk.js.map": "/static/js/22.7ec1dda8.chunk.js.map",
     "272.fc222ae9.chunk.js.map": "/static/js/272.fc222ae9.chunk.js.map",
     "841.bef26980.chunk.js.map": "/static/js/841.bef26980.chunk.js.map",
-    "186.a076517b.chunk.js.map": "/static/js/186.a076517b.chunk.js.map",
+    "186.09c3ea27.chunk.js.map": "/static/js/186.09c3ea27.chunk.js.map",
     "377.31684c30.chunk.js.map": "/static/js/377.31684c30.chunk.js.map"
   },
   "entrypoints": [
+<<<<<<< HEAD
+    "static/css/main.30c9193e.css",
+    "static/js/main.a0b94822.js"
+=======
     "static/css/main.3f863b78.css",
-    "static/js/main.5c3034d0.js"
+    "static/js/main.05353c61.js"
+>>>>>>> JantonyBranch
   ]
 }

build/index.html

-<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Ionic App</title><base href="/"/><meta name="color-scheme" content="light dark"/><meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><meta name="format-detection" content="telephone=no"/><meta name="msapplication-tap-highlight" content="no"/><link rel="manifest" href="/manifest.json"/><link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-title" content="Ionic App"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><script defer="defer" src="/static/js/main.5c3034d0.js"></script><link href="/static/css/main.3f863b78.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
+<<<<<<< HEAD
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Ionic App</title><base href="/"/><meta name="color-scheme" content="light dark"/><meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><meta name="format-detection" content="telephone=no"/><meta name="msapplication-tap-highlight" content="no"/><link rel="manifest" href="/manifest.json"/><link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-title" content="Ionic App"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><script defer="defer" src="/static/js/main.a0b94822.js"></script><link href="/static/css/main.30c9193e.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
+=======
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Ionic App</title><base href="/"/><meta name="color-scheme" content="light dark"/><meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><meta name="format-detection" content="telephone=no"/><meta name="msapplication-tap-highlight" content="no"/><link rel="manifest" href="/manifest.json"/><link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-title" content="Ionic App"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><script defer="defer" src="/static/js/main.05353c61.js"></script><link href="/static/css/main.3f863b78.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
+>>>>>>> JantonyBranch

build/static/js/738.aba3ba7d.chunk.js.LICENSE.txt

-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- *
- * This file is a port of shadowCSS from webcomponents.js to TypeScript.
- * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
- * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
- */

build/static/js/851.7ada53df.chunk.js.LICENSE.txt

-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */

build/static/js/main.a0b94822.js.LICENSE.txt

-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-
-/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
-
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
-
-/**
- * @license React
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

capacitor.config 2.ts

+import { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'io.ionic.starter',
+  appName: 'TPCApp',
+  webDir: 'build',
+  bundledWebRuntime: false
+};
+
+export default config;

capacitor.config.json

+{}

frases.json

+{
+    "frases": [
+        {"id": "build/static/media/frases_motivacionales/1.png"},
+        {"id": "build/static/media/frases_motivacionales/2.png"},
+        {"id": "build/static/media/frases_motivacionales/3.png"},
+        {"id": "build/static/media/frases_motivacionales/4.png"},
+        {"id": "build/static/media/frases_motivacionales/5.png"},
+        {"id": "build/static/media/frases_motivacionales/6.png"},
+        {"id": "build/static/media/frases_motivacionales/7.png"},
+        {"id": "build/static/media/frases_motivacionales/8.png"},
+        {"id": "build/static/media/frases_motivacionales/9.png"}
+    ]
+}

package-lock.json

         "cordova-plugin-geolocation": "^4.1.0",
         "history": "^4.9.0",
         "ionicons": "^6.0.3",
+        "mathjs": "^11.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router": "^5.2.0",
       },
       "devDependencies": {
         "@capacitor/cli": "4.5.0",
+        "@types/mathjs": "^9.4.2",
         "@types/react-dom": "^18.0.9",
         "react-scripts": "5.0.1"
       }
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.20.1",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.1.tgz",
-      "integrity": "sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==",
+      "version": "7.20.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.6.tgz",
+      "integrity": "sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.10"
+        "regenerator-runtime": "^0.13.11"
       },
       "engines": {
         "node": ">=6.9.0"
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/mathjs": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@types/mathjs/-/mathjs-9.4.2.tgz",
+      "integrity": "sha512-GF5g1vJmvKdWIWsE53XX7EDAyCaZ9p6gaYm1xhlXn5JjrY/NJrOfJN3fBxS3wyZpVh3QqKoMkS2WjFwxWMHOTw==",
+      "deprecated": "This is a stub types definition. mathjs provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "dependencies": {
+        "mathjs": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
       "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
       "dev": true
     },
+    "node_modules/complex.js": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/complex.js/-/complex.js-2.1.1.tgz",
+      "integrity": "sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg==",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/infusion"
+      }
+    },
     "node_modules/compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
     "node_modules/decimal.js": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
-      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
-      "dev": true
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
     },
     "node_modules/dedent": {
       "version": "0.7.0",
       "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
       "dev": true
     },
+    "node_modules/escape-latex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/escape-latex/-/escape-latex-1.2.0.tgz",
+      "integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw=="
+    },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
       "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
-      "dev": true,
       "engines": {
         "node": "*"
       },
         "node": ">=10"
       }
     },
+    "node_modules/javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw=="
+    },
     "node_modules/jest": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/mathjs": {
+      "version": "11.5.0",
+      "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-11.5.0.tgz",
+      "integrity": "sha512-vJ/+SqWtxjW6/aeDRt8xL3TlOVKqwN15BIyTGVqGbIWuiqgY4SxZ0yLuna82YH9CB757iFP7uJ4m3KvVBX7Qcg==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.6",
+        "complex.js": "^2.1.1",
+        "decimal.js": "^10.4.3",
+        "escape-latex": "^1.2.0",
+        "fraction.js": "^4.2.0",
+        "javascript-natural-sort": "^0.7.1",
+        "seedrandom": "^3.0.5",
+        "tiny-emitter": "^2.1.0",
+        "typed-function": "^4.1.0"
+      },
+      "bin": {
+        "mathjs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "dev": true
     },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
         "node": ">= 0.6"
       }
     },
+    "node_modules/typed-function": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/typed-function/-/typed-function-4.1.0.tgz",
+      "integrity": "sha512-DGwUl6cioBW5gw2L+6SMupGwH/kZOqivy17E4nsh1JI9fKF87orMmlQx3KISQPmg3sfnOUGlwVkroosvgddrlg==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
       }
     },
     "@babel/runtime": {
-      "version": "7.20.1",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.1.tgz",
-      "integrity": "sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==",
+      "version": "7.20.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.6.tgz",
+      "integrity": "sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==",
       "requires": {
-        "regenerator-runtime": "^0.13.10"
+        "regenerator-runtime": "^0.13.11"
       }
     },
     "@babel/runtime-corejs3": {
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "@types/mathjs": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@types/mathjs/-/mathjs-9.4.2.tgz",
+      "integrity": "sha512-GF5g1vJmvKdWIWsE53XX7EDAyCaZ9p6gaYm1xhlXn5JjrY/NJrOfJN3fBxS3wyZpVh3QqKoMkS2WjFwxWMHOTw==",
+      "dev": true,
+      "requires": {
+        "mathjs": "*"
+      }
+    },
     "@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
       "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
       "dev": true
     },
+    "complex.js": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/complex.js/-/complex.js-2.1.1.tgz",
+      "integrity": "sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg=="
+    },
     "compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
     "decimal.js": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
-      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
-      "dev": true
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
     },
     "dedent": {
       "version": "0.7.0",
       "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
       "dev": true
     },
+    "escape-latex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/escape-latex/-/escape-latex-1.2.0.tgz",
+      "integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw=="
+    },
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
     "fraction.js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
-      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
-      "dev": true
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA=="
     },
     "fresh": {
       "version": "0.5.2",
         "minimatch": "^3.0.4"
       }
     },
+    "javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw=="
+    },
     "jest": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
         "tmpl": "1.0.5"
       }
     },
+    "mathjs": {
+      "version": "11.5.0",
+      "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-11.5.0.tgz",
+      "integrity": "sha512-vJ/+SqWtxjW6/aeDRt8xL3TlOVKqwN15BIyTGVqGbIWuiqgY4SxZ0yLuna82YH9CB757iFP7uJ4m3KvVBX7Qcg==",
+      "requires": {
+        "@babel/runtime": "^7.20.6",
+        "complex.js": "^2.1.1",
+        "decimal.js": "^10.4.3",
+        "escape-latex": "^1.2.0",
+        "fraction.js": "^4.2.0",
+        "javascript-natural-sort": "^0.7.1",
+        "seedrandom": "^3.0.5",
+        "tiny-emitter": "^2.1.0",
+        "typed-function": "^4.1.0"
+      }
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
         "ajv-keywords": "^3.5.2"
       }
     },
+    "seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "tiny-invariant": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
         "mime-types": "~2.1.24"
       }
     },
+    "typed-function": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/typed-function/-/typed-function-4.1.0.tgz",
+      "integrity": "sha512-DGwUl6cioBW5gw2L+6SMupGwH/kZOqivy17E4nsh1JI9fKF87orMmlQx3KISQPmg3sfnOUGlwVkroosvgddrlg=="
+    },
     "typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",

package.json

     "cordova-plugin-geolocation": "^4.1.0",
     "history": "^4.9.0",
     "ionicons": "^6.0.3",
+    "mathjs": "^11.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^5.2.0",
   "description": "An Ionic project",
   "devDependencies": {
     "@capacitor/cli": "4.5.0",
+    "@types/mathjs": "^9.4.2",
     "@types/react-dom": "^18.0.9",
     "react-scripts": "5.0.1"
   }

src/pages/Flag.json

+ [{"title" : "Amenazas",
+  "content" : ["Asustarla con amenazas de hacerle mal.",
+              "Amenazarla con dejarla, con el suicidio o con denunciarla falsamente a la autoridad.",
+              "Obligarla a retirar los cargos presentados contra él.",
+               "Obligarla a cometer actos ilegales."]},
+ {"title" : "Intimidación",
+  "content" : ["Provocándole miedo a través de sus miradas, acciones y gestos.",
+               "Destrozar objetos.",
+               "Intimidarla rompiéndole sus cosas, maltratando a los animales domésticos, mostrándole armas."]},
+  {"title" : "Abuso Emocional",
+   "content" : ["Hacerla sentir inferior.",
+                "Hacerla sentir mal.",
+                "Insultarle con nombres ofensivos.",
+                "Hacerla pensar que está loca.",
+                "Confundirla a propósito.",
+                "Humillarla.",
+                "Hacerla sentir culpable."]},
+  {"title": "Aislamiento",
+   "content" : ["Controlar lo que hace, a quién puede ver, con quién puede hablar, lo que puede leer y dónde va.",
+                "Limitarle su vida social utilizando los celos para justificar sus actos"]},
+  {"title" : "Desvalorizar, Negar, Culpar",
+   "content" : ["No tomar seriamente preocupación que ella tiene sobre el abuso.",
+                "Negar que uso hacerla sentir responsable de la conducta abusiva.",
+                "Decirle que ella lo provocó."]},
+  {"title" : "Manipulación de los Niño(a)s",
+   "content" : ["Hacerla sentir culpable por el comportamiento de los niño(a) como intermediarios y mantener así el control.",
+                "Usar las visitas con los niño(a)s para molestarla o amenazarla.",
+                "Amenazarla con quitarle los niño(a)s."]},
+  {"title" : "Abuso Económico",
+   "content" : ["No dejarla trabajar o impedirle que mantenga su empleo.",
+                "Obligarala a que le pida dinero.",
+                "Darle una mensualidad.",
+                "Quitarle el dinero.",
+                "No informarle acerca de los ingresos familiares o no permitirle disponer de los ingresos."]},
+  {"title" : "Privilegio Masculino",
+   "content": ["Tratarla como una sirvienta.",
+               "No dejarla tomar decisiones importantes.",
+               "Actuar como el rey de la casa.",
+               "Definir las partes del hombre y de la mujer."]}]

src/pages/Flag.tsx

-// Created by Cynthia 
-// Edited by Angel Romero 
+import {
+  IonAccordion,
+  IonAccordionGroup,
+  IonCard,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonTitle,
+  IonToolbar} from '@ionic/react';
 
-import React, { useRef } from 'react';
-import { IonButton, IonButtons, IonCard, IonCol, IonContent, IonGrid, IonHeader, IonModal, IonPage, IonRow, IonTitle, IonToolbar } from '@ionic/react';
 import './styles/styles.css';
 
+// generate single accordion item given a title and points of info
+const AccordionItem = (title: string, content: string[]) => {
+  return (
+    <IonAccordion value={title}>
+      <IonItem slot="header" color="light">
+        <IonLabel class="ion-text-center">{title}</IonLabel>
+      </IonItem>
+      <div slot="content">
+        {
+          // generate each point in content
+          // We need to add some color to the cards, preferably white
+          content.map((text: string) =>{
+            return (
+              <IonCard>
+                <IonItem>
+                  <IonLabel text-wrap class="ion-text-center">{text}</IonLabel>
+                </IonItem>
+              </IonCard>
+            );
+          })
+        }
+      </div>
+    </IonAccordion>)
+}
 
-// Create all the modal elements for each card element on the flag screen
 const Flag: React.FC = () => {
-  const amenazas = useRef<HTMLIonModalElement>(null);
-  const intimidacion = useRef<HTMLIonModalElement>(null);
-  const abusoEmo = useRef<HTMLIonModalElement>(null);
-  const aislamiento = useRef<HTMLIonModalElement>(null);
-  const desvalorizar = useRef<HTMLIonModalElement>(null);
-  const manipulacion = useRef<HTMLIonModalElement>(null);
-  const abusoEco = useRef<HTMLIonModalElement>(null);
-  const privMasc = useRef<HTMLIonModalElement>(null);
-
+  // Load Flag.json which has format of Object[],
+  // where each object has a title and content field.
+  let content = require("./Flag.json")
   return (
     <IonPage>
       
           <IonTitle class="ion-text-center screen-titles">TPC ❤️</IonTitle>
         </IonToolbar>
       </IonHeader>
-
       <IonContent fullscreen>
-        <IonTitle class="ion-text-center screen-h2" color="light">Pendiente a...</IonTitle>
-
-        {/* Here goes the body containing the cards */}
-        <IonGrid>
-          <IonRow>
-            {/* Amenazas card */}
-            <IonCol>
-              <IonButton id="open-amenazas" color="light" expand="block">
-                Amenazas
-              </IonButton>
-              <IonModal ref={amenazas} trigger="open-amenazas">
-                <IonHeader>
-                  <IonToolbar>
-                    <IonTitle>Amenazas</IonTitle>
-                    <IonButtons slot="end">
-                      <IonButton color="light" onClick={() => amenazas.current?.dismiss()}>Cerrar</IonButton>
-                    </IonButtons>
-                  </IonToolbar>
-                </IonHeader>
-                <IonContent className="ion-padding">
-                  <IonCard color="light">
-                    <p>Asustarla con amenazas de hacerle mal.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Amenazarla con dejarla, con el suicidio o con denunciarla falsamente a la autoridad.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Obligarla a retirar los cargos presentados contra él.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Obligarla a cometer actos ilegales.</p>
-                  </IonCard>
-                </IonContent>
-              </IonModal>
-            </IonCol>
-            {/* Intimidacion card */}
-            <IonCol>
-              <IonButton id="open-intimidacion" color="light" expand="block" >
-                Intimidación
-              </IonButton>
-              <IonModal ref={intimidacion} trigger="open-intimidacion">
-                <IonHeader>
-                  <IonToolbar>
-                    <IonTitle>Intimidación</IonTitle>
-                    <IonButtons slot="end">
-                      <IonButton color="light" onClick={() => intimidacion.current?.dismiss()}>Cerrar</IonButton>
-                    </IonButtons>
-                  </IonToolbar>
-                </IonHeader>
-                <IonContent className="ion-padding">
-                  <IonCard color="light">
-                    <p>Provocándole miedo a través de sus miradas, acciones y gestos.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Destrozar objetos.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Intimidarla rompiéndole sus cosas, maltratando a los animales domésticos, mostrándole armas.</p>
-                  </IonCard>
-                </IonContent>
-              </IonModal>
-            </IonCol>
-          </IonRow>
-          <IonRow>
-            {/* Abuso emocional card */}
-            <IonCol>
-              <IonButton id="open-abuso-emocional" color="light" expand="block">
-                Abuso Emocional
-              </IonButton>
-              <IonModal ref={abusoEmo} trigger="open-abuso-emocional">
-                <IonHeader>
-                  <IonToolbar>
-                    <IonTitle>Abuso Emocional</IonTitle>
-                    <IonButtons slot="end">
-                      <IonButton color="light" onClick={() => abusoEmo.current?.dismiss()}>Cerrar</IonButton>
-                    </IonButtons>
-                  </IonToolbar>
-                </IonHeader>
-                <IonContent className="ion-padding">
-                  <IonCard color="light">
-                    <p>Hacerla sentir inferior.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Hacerla sentir mal.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Insultarle con nombres ofensivos.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Hacerla pensar que está loca.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Confundirla a propósito.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Humillarla.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Hacerla sentir culpable.</p>
-                  </IonCard>
-                </IonContent>
-              </IonModal>
-            </IonCol>
-            {/* Aislamiento card */}
-            <IonCol>
-              <IonButton id="open-aislamiento" color="light" expand="block">
-                Aislamiento
-              </IonButton>
-              <IonModal ref={aislamiento} trigger="open-aislamiento">
-                <IonHeader>
-                  <IonToolbar>
-                    <IonTitle>Aislamiento</IonTitle>
-                    <IonButtons slot="end">
-                      <IonButton color="light" onClick={() => aislamiento.current?.dismiss()}>Cerrar</IonButton>
-                    </IonButtons>
-                  </IonToolbar>
-                </IonHeader>
-                <IonContent className="ion-padding">
-                  <IonCard color="light">
-                    <p>Controlar lo que hace, a quién puede ver, con quién puede hablar, lo que puede leer y dónde va.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Limitarle su vida social utilizando los celos para justificar sus actos</p>
-                  </IonCard>
-                </IonContent>
-              </IonModal>
-            </IonCol>
-          </IonRow>
-          <IonRow>
-            {/* Desvalorizar card */}
-            <IonCol>
-              <IonButton id="open-des-neg-cul" color="light" expand="block">
-                Desvalorizar, Negar, Culpar
-              </IonButton>
-              <IonModal ref={desvalorizar} trigger="open-des-neg-cul">
-                <IonHeader>
-                  <IonToolbar>
-                    <IonTitle>Desvalorizar, Negar, Culpar</IonTitle>
-                    <IonButtons slot="end">
-                      <IonButton color="light" onClick={() => desvalorizar.current?.dismiss()}>Cerrar</IonButton>
-                    </IonButtons>
-                  </IonToolbar>
-                </IonHeader>
-                <IonContent className="ion-padding">
-                  <IonCard color="light">
-                    <p>No tomar seriamente preocupación que ella tiene sobre el abuso.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Negar que uso hacerla sentir responsable de la conducta abusiva.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Decirle que ella lo provocó.</p>
-                  </IonCard>
-                </IonContent>
-              </IonModal>
-            </IonCol>
-            {/* Manipulacion card */}
-            <IonCol>
-              <IonButton id="open-manipulacion" color="light" expand="block">
-                Manipulación de los Niño(a)s
-              </IonButton>
-              <IonModal ref={manipulacion} trigger="open-manipulacion">
-                <IonHeader>
-                  <IonToolbar>
-                    <IonTitle>Manipulación de los Niño(a)s</IonTitle>
-                    <IonButtons slot="end">
-                      <IonButton color="light" onClick={() => manipulacion.current?.dismiss()}>Cerrar</IonButton>
-                    </IonButtons>
-                  </IonToolbar>
-                </IonHeader>
-                <IonContent className="ion-padding">
-                  <IonCard color="light">
-                    <p>Hacerla sentir culpable por el comportamiento de los niño(a) como intermediarios y mantener así el control.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Usar las visitas con los niño(a)s para molestarla o amenazarla.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Amenazarla con quitarle los niño(a)s.</p>
-                  </IonCard>
-                </IonContent>
-              </IonModal>
-            </IonCol>
-          </IonRow>
-          <IonRow>
-            {/* Abuso economico card */}
-            <IonCol>
-              <IonButton id="open-abuso-economico" color="light" expand="block">
-                Abuso Económico
-              </IonButton>
-              <IonModal ref={abusoEco} trigger="open-abuso-economico">
-                <IonHeader>
-                  <IonToolbar>
-                    <IonTitle>Abuso Económico</IonTitle>
-                    <IonButtons slot="end">
-                      <IonButton color="light" onClick={() => abusoEco.current?.dismiss()}>Cerrar</IonButton>
-                    </IonButtons>
-                  </IonToolbar>
-                </IonHeader>
-                <IonContent className="ion-padding">
-                  <IonCard color="light">
-                    <p>No dejarla trabajar o impedirle que mantenga su empleo.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Obligarala a que le pida dinero.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Darle una mensualidad.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Quitarle el dinero.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>No informarle acerca de los ingresos familiares o no permitirle disponer de los ingresos.</p>
-                  </IonCard>
-                </IonContent>
-              </IonModal>
-            </IonCol>
-            {/* Privilegio masculino card */}
-            <IonCol>
-              <IonButton id="open-priv-masculino" color="light" expand="block">
-                Privilegio Masculino
-              </IonButton>
-              <IonModal ref={privMasc} trigger="open-priv-masculino">
-                <IonHeader>
-                  <IonToolbar>
-                    <IonTitle>Privilegio Masculino</IonTitle>
-                    <IonButtons slot="end">
-                      <IonButton color="light" onClick={() => privMasc.current?.dismiss()}>Cerrar</IonButton>
-                    </IonButtons>
-                  </IonToolbar>
-                </IonHeader>
-                <IonContent className="ion-padding">
-                  <IonCard color="light">
-                    <p>Tratarla como una sirvienta.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>No dejarla tomar decisiones importantes.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Actuar como el rey de la casa.</p>
-                  </IonCard>
-                  <IonCard color="light">
-                    <p>Definir las partes del hombre y de la mujer.</p>
-                  </IonCard>
-                </IonContent>
-              </IonModal>
-            </IonCol>
-          </IonRow>
-        </IonGrid>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Flag</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonAccordionGroup multiple={true}>
+          {
+            // generate an accordion item for each object in Flag.json
+            content.map((obj: any) => AccordionItem(obj.title, obj.content))
+          }
+        </IonAccordionGroup>
       </IonContent>
     </IonPage>
   );
-};
+}
 
 export default Flag;

src/pages/Home.tsx

 import { isPlatform } from '@ionic/react';
 
 import './styles/styles.css';
+import * as math from 'mathjs';
 
 // This is the date that is going to appear on the
 // card with the Motivational message
+let value = math.randomInt(1,10);
+let num = value.toString();
+
+console.log(value);
 const current = new Date();
 const date = `${current.toLocaleString('default', {month: 'long'}) } ${current.getDate()}`;
 
           <IonCardHeader class="card-header">
             <IonCardTitle class="card-date">
               {date}
-              <IonButton fill="clear"> <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon></IonButton> 
+              <IonButton fill="clear"> 
+                <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon>
+              </IonButton> 
             </IonCardTitle>
           </IonCardHeader>
-          <IonImg class="moti-img" alt="Motivational messa ge" src={require("./generatedMsgs/moti1.jpeg")}></IonImg>
+          <IonImg class="moti-img" alt="Motivational message" src={require("./images/frases_motivavionales/"+num+".png")}></IonImg>
         </IonCard>
 
         {/* Card 2 */}
           <IonCardHeader class="card-header">
             <IonCardTitle class="card-date">
               {date}
-              <IonButton fill="clear"> <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon></IonButton>
+              <IonButton fill="clear">
+                <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon>
+              </IonButton>
             </IonCardTitle>
           </IonCardHeader>
-          <IonImg class="moti-img" alt="Motivational messa ge" src={require("./generatedMsgs/moti1.jpeg")}></IonImg>
+          <IonImg class="moti-img" alt="Motivational message" src={require("./images/frases_motivavionales/" + num + ".png")}></IonImg>
         </IonCard>
       </IonContent>
     </IonPage>

src/pages/styles/styles.css

     align-items: center;
 }
 
+/* Styles for the flag screen */
+
+.flag-item {
+    background-color: #fff !important;
+}
 
 

src/theme/variables.css

 	--ion-color-tertiary-tint: #ff941a;
 }
 
-@media (prefers-color-scheme: light) {
+@media (prefers-color-scheme: dark) {
 
   body {
       /* Background-color */