Adding Essential Example (#365)

* Adding Essential Example

* fixing lowercase Images

* fixing image size

* fixing build issues

* Image Alignments

* minor tweaks.

---------

Co-authored-by: danfunk <daniel.h.funk@gmail.com>

docs/UsingSpiffdemo/Getting_Started.md

@@ -1,35 +1,28 @@
-# Using Spiffdemo.org
-Spiffdemo is a demo version of Spiffworkflow, offering a limited set of functions and features.
-It provides users a platform to explore workflow concepts through a collection of top-level examples, diagrams, and workflows.
-Users can interact with pre-built models, make modifications, and visualize process flows.
-Spiffdemo serves as a demonstration version of Spiffworkflow, providing a glimpse into its capabilities with limited functionality.
-Spiffworkflow, on the other hand, is a full-fledged tool that offers a broader range of features for creating and managing workflows.
+# Using SpiffArena
+Sartography (the company developing SpiffWorkflow and SpiffArena) is providing users a platform to explore workflow concepts through a collection of examples, diagrams, and workflows. Users can interact with pre-built models, make modifications, and visualize process flows.
 
-| Category        | Spiffdemo (Demo Version) | SpiffWorkflow (Full Version) |
-|---------|-------------------------|------------------------------|
-| Functionality | Limited set of functions and features | Comprehensive set of features and functions for creating, managing, and optimizing process models and workflows |
-| Purpose | Provides a platform for exploration and demonstration of workflow concepts | Enables users to create, manage, and optimize their own process models and workflows for their specific needs and requirements |
-| Features | Limited functionality for interacting with pre-built models and making modifications | Advanced features such as task management, process modeling, diagram editing, and customizable properties |
+## How to Login to SpiffArena
 
-## How to Login to Spiffdemo
-To begin your journey with Spiffdemo, open your web browser and navigate to the official Spiffdemo website.
+```{image} ./Images/Login.png
+:alt: Login Screen
+:class: bg-primary mb-1
+:width: 230px
+:align: right 
+``` 
+To begin your journey with SpiffArena, open your web browser and navigate to the SpiffArena website (Currently spiffdemo.org).  
 
-On the login screen, you will find the option to log in using Single Sign-On.
-Click the Single Sign-On button and select your preferred login method, such as using your Gmail account.
-
-<p align="center">
-<img src="https://lh3.googleusercontent.com/lfwuApYvOV1336IIbaQnh63niw6mmLJkpyFjM6lm3oHXClzwSh9O7l4q6CGmIjLrTRrHd_DzRGP7E-Km7IcD-zg0PZmw2IpTLjzQgTCiJSASZqFplvhHCfmXMvHcKDotNAYwRIcAEWYSrlLuka4U8Nk" alt="drawing" width="400"/>
+On the login screen, you will find the option to log in using Single Sign-On.  Click the Single Sign-On button and select your preferred login method, such as using your Gmail account.  
 
 
-```{admonition} Note: Stay tuned as we expand our sign-on options beyond Gmail.
-More ways to access Spiffdemo are coming your way!
+```{admonition} Note: 
+Stay tuned as we expand our sign-on options beyond Gmail.
+More ways to access SpiffArena are coming your way!
 ```
 ## Exploring the Examples
 
 When logging into the dashboard, it is crucial to familiarize yourself with the functions it offers and how the underlying engine operates.
 In the demo website, we will explore two examples: the Minimal Example and the Essential Example, to provide a clear understanding of the process.
 
-
 ![](https://lh5.googleusercontent.com/Db25xtzQon8tu4YbsOLx-DPEyONhrF5jfxhbEXOqDomT2YlGnhEWBZMVFF84ViPyCRD-HMca--Xl4bj8vIF5-KNfpoKjujUZk1wDIMuBMymbg0o1jgucPrZxSsxxT1GuLYGjXPwCyEQ8BhpSt6URJCg)
 
   
@@ -76,7 +69,7 @@ General
 -   Name field is usually empty unless user wants to provide it.
 It serves as a label or identifier for the process.
     
--   The ID is automatically populated by the system (default behavior) however it can be updated by the user, but it must remain unique within the other processes.
+-   The ID is automatically populated by the system (default behavior) however it can be updated by the user, but it must be unique across all of the processes within SpiffArena.
     
 -   By default, all processes are executable, which means the engine can run the process.
     
@@ -115,13 +108,14 @@ Documentation
 -   This field is used to provide any notes related to the element.
     
 
-  ```{admonition} Note: In the minimal example, the Start Event is a None Start Event.
+  ```{admonition} Note: 
+
+In the minimal example, the Start Event is a None Start Event.
 This type of Start Event signifies that the process can be initiated without any triggering message or timer event.
 It is worth noting that there are other types of Start Events available, such as Message Start Events and Timer Start Events.
 These advanced Start Events will be discussed in detail in the subsequent sections, providing further insights into their specific use cases and functionalities.
 ```
 
-
 **2. Manual Task**
 
 Within the process flow, the next step is a manual task.
@@ -161,7 +155,6 @@ To view and edit the instructions, click on the editor, and a window will open d
 
 ![](https://lh4.googleusercontent.com/wWNqTB2EU4W0Hgz_u2l7PiEqbGVRuZMjtbgGUrckAPP9aD2TRGFvZgVkRXWcx-CV5JsSzWYDsZuXCkTpvmyfdUmFm13bTZ5o5OOf7ykBMoJ-vGBPcxQojSpE9leMn97zZDbEdJmZPgnrChQk6tbjUc8)
 
-
 3. ##### End Task
     
 
@@ -190,3 +183,63 @@ Instructions
     
 
 ![](https://lh5.googleusercontent.com/lcGDq-colYTa0zRq5yObuN6D5aW2wH-PheyYFMPJ9D77lZ_-fQlUrtFHNwKmCod4v1JYrWnblJEzW5VkVFM_I_Q1d8fhiWC98DPK4ZDctI7Jbqf11DdXSJAUVvZ2C2ubv-3FKXzVkbgGY8Fnk0irSdo)
+
+
+###  Essential Example
+Now that we have explored the minimal example, let's delve into a more comprehensive BPMN model known as the Essential Example. This example serves as a stepping stone towards a deeper understanding of BPMN, as it incorporates a variety of fundamental concepts that work harmoniously together.
+
+#### **Access the Process Directory**
+Clicking on the process name will open the directory dedicated to the Essential Example process. Here are the four files in the Process:
+
+**BPMN editor** : The BPMN editor is a primary file that runs the engine. In the minimal example, we learned that it allows you to visually design and represent business processes using the Business Process Model and Notation (BPMN) standard. 
+
+![image](Images/BPMN_Editor.png)
+
+**DMN table**: A file that defines decision-making logic using the Decision Model and Notation (DMN) standard, enabling you to model complex decision rules and outcomes.
+
+![Image](Images/DMN_table.png)
+
+Here's what a DMN table looks like:
+
+![Image](Images/DMN_Properties_Table.png)
+
+**JSON Schema**: A file that describes the structure, format, and validation rules for data in JSON format, ensuring data integrity and interoperability.
+![Image](Images/JSONSchema.png)
+
+**UI Schema**: A file that defines the layout, structure, and behavior of user interfaces, facilitating the development of intuitive and interactive user experiences.
+![Image](Images/UI-Schema.png)
+
+#### **Process Workflow**
+In this BPMN diagram example, the process is outlined step by step: The process initiates with a start event, serving as the entry point for the workflow.
+
+Following the start event, a manual task named "Introduction" is incorporated, responsible for displaying a welcoming message to the user.
+
+![](Images/Manual_EM.png)
+
+Next, a **User task** named "Display Questions"is added, facilitating the collection of information from real individuals through web forms. In the properties section, a JSON form is created to specify the questions for the users to respond to.
+
+![](Images/User_EM.png)
+
+ Once the user completes the form, the gathered data is passed on to a **script task** named "Modify Information", responsible for calculating the data score. The script for this calculation is embedded in the properties section.
+
+![](Images/Script_Em.png)
+
+As an alternative approach, the data score can also be determined using a **DMN table** named "Determine Score Message". Decision tables offer an effective means of defining business rules in an easily comprehensible format. The DMN table calculates the score based on pre-defined rules.
+
+![](Images/DMN_EM.png)
+
+After the score calculation, an **exclusive gateway** is employed to make decisions based on the determined score. Three manual tasks are defined, each displaying a different message based on the obtained score:
+
+![](Images/Exclusive_Em.png)
+
+a. **Worst Possible Response**: If the score indicates the worst possible response, a manual task displays a message stating that it is completely wrong.
+
+b. **At Least One Correct Response**: If the score indicates that at least one response was correct, a manual task displays a message acknowledging the correct response.
+
+c. **Perfect Score**: If the score indicates a perfect score, a manual task displays a message recognizing the excellent performance.
+
+Once the score messages are displayed, a **signal event** is included, providing users with the option to continue and conclude the process or choose to repeat the process from the beginning. Signal events enable external forces or internal errors to interact with the process, and in this scenario, a button press allows for the interruption of the diagram's normal course.
+
+![](Images/Signal_EM.png)
+
+