Icon

01.Game_​Data_​App - Exercise

Game Data App - Exercise

In this exercise you will finalize a Game Data App adding the Page 3-Form and Page 4-Dashboard. You will practice the creation of a component, view customization using CSS, the configuration of the Flow Chart View and the creation of a simple interactive dashboard.

Refresh Button Widgetnode before the ColumnSelection Widget nodeOREnable automatic re-execution on the ColumnSelection Widget nodePULL FOR THE ANSWER Page 4aShow an interactive dashboard with game statistics Page 1Set up the match Page 2Play the game Page 3Show match results and collect user feedback Session 3 - Building and Deploying a WebPortal Data AppIn this exercise you will finalize a Game Data App adding the Page 3-Form and Page 4-Dashboard.You will practice the creation of a component, view customization using CSS, the configuration ofthe Flow Chart View and the creation of a simple interactive dashboard. The first two pages are already configured. Page 1 shows a Welcome page while setting up thegame session, and Page 2 let the user play the game (3 iterations) /* CSS rules */.knime-title { font-size: 30px; font-weight: bold; text-align: center; color: #3d3a39; }.knime-table-info { display: none}.knime-table-cell { text-align: center;}.knime-table-header { background-color:#ffd700; color: #3d3a39;} (Optional) Page 4b Data App Flowchart Here we read the match resultsdata and prepare it for thevisualization. We want to show achoropleth map and let the userselect whether it displays thewrong or the correct attempts. Step 1. Customize the Table View nodevisualization via CSS.1. Add the CSS Editor node2. Edit the CSS by adding the code provided below3. Connect the CSS Editor node to the Table Viewnode via flow variable connection4. Configure the Table View flow variable to use thecustom CSS5. How did the view change? Step 2. Configure the Data App Flowchartto guide the user through the flow1. Search the Data App Flowchart verifiedcomponent on the KNIME Community Huband add it to the workflow -> https://kni.me/c/-o_CLuu7-qrfguqE2. With a Table Creator node, define thesteps of the data app (Welcome, Play, Form,Dashboard) and set page 3 as the activeone.3. Configure the Data App Flowchartcomponent to use the correct columns. Step 3. Create the Page 3 - Formcomponent1. Select all the nodes and components inthe Page 3 orange annotation. Wrap themup into a component. Name it "Page 3".2. Connect the Page 3 component to themain flow (Variable Loop End node) viaflow variable connection3. Open the Page 3 component andrearrange its composite view via the NodeUsage and Layout panel. Step 4. Set up the widgetYou want the user to select whether todisplay wrong or correct attemps,interactively. Hence,1. With a Column Filter node, filter the"Wrong Attempts" and "Correct Attempts"columns2. Pass this table to a Column SelectionWidget node.3. Configure the Column SelectionWidget node with the label "Attempts todisplay" to guide the user during theselection. Step 5. Set up the view1. Search the Choropleth Mapverified component on the KNIMECommunity Hub and add it to theworkflow -> https://kni.me/c/L8IzuxeVxBOw4qDm2. Provide the formatted data andconfigure with a meaningful title. 3. Set the "color_axis_var" to use theflow variable coming from the ColumnSelection Widget node Step 6. Create Page 4 -Dashboard Component1. Select all the nodes andcomponents in Page 4aand wrap them up into acomponent. Name it"Page 4a".2. Rearrange thecomponent compositeview.IMPORTANT: You wantthe user to update thechoropleth map view afterselecting a newconfiguration. What ismissing to enable the viewupdate? Step 7. Validate user input dataYou want to check whether the user entered valid data or justleft the default entries.1. With a Row Filter node, remove the entry if the emailaddress is "example@email.com" (default)2. Define a conditional path by adding an Empty TableSwitch node.3. Connect the first port of the Empty Table Switch node(non-empty table) to Page 4a - the user sees the dashboard4. Connect the second port of the Empty Table Switch node(empty table) to Page 4b - the user sees an error message Step 8. DeploymentUpload this workflow to KNIME Business Hub1. Right click the workflow in the KNIME Explorer andselect Upload to Server or Hub.2. Make sure to reset the workflow before uploadIn the Hub browser UI1. Create a new space version of the space containingthe workflow2. Create a deployment of this workflow as Data app3. Execute the Data app from the list of deployments Show match results read localmatch_results.csvSelect image andnames columnsCounting Loop Start Variable Loop End Table View Data CollectionForm Match data Table Rowto Variable Table Rowto Variable Page 4b -Error Message Format Data forChoropleth Map Play Welcome Refresh Button Widgetnode before the ColumnSelection Widget nodeOREnable automatic re-execution on the ColumnSelection Widget nodePULL FOR THE ANSWER Page 4aShow an interactive dashboard with game statistics Page 1Set up the match Page 2Play the game Page 3Show match results and collect user feedback Session 3 - Building and Deploying a WebPortal Data AppIn this exercise you will finalize a Game Data App adding the Page 3-Form and Page 4-Dashboard.You will practice the creation of a component, view customization using CSS, the configuration ofthe Flow Chart View and the creation of a simple interactive dashboard. The first two pages are already configured. Page 1 shows a Welcome page while setting up thegame session, and Page 2 let the user play the game (3 iterations) /* CSS rules */.knime-title { font-size: 30px; font-weight: bold; text-align: center; color: #3d3a39; }.knime-table-info { display: none}.knime-table-cell { text-align: center;}.knime-table-header { background-color:#ffd700; color: #3d3a39;} (Optional) Page 4b Data App Flowchart Here we read the match resultsdata and prepare it for thevisualization. We want to show achoropleth map and let the userselect whether it displays thewrong or the correct attempts. Step 1. Customize the Table View nodevisualization via CSS.1. Add the CSS Editor node2. Edit the CSS by adding the code provided below3. Connect the CSS Editor node to the Table Viewnode via flow variable connection4. Configure the Table View flow variable to use thecustom CSS5. How did the view change? Step 2. Configure the Data App Flowchartto guide the user through the flow1. Search the Data App Flowchart verifiedcomponent on the KNIME Community Huband add it to the workflow -> https://kni.me/c/-o_CLuu7-qrfguqE2. With a Table Creator node, define thesteps of the data app (Welcome, Play, Form,Dashboard) and set page 3 as the activeone.3. Configure the Data App Flowchartcomponent to use the correct columns. Step 3. Create the Page 3 - Formcomponent1. Select all the nodes and components inthe Page 3 orange annotation. Wrap themup into a component. Name it "Page 3".2. Connect the Page 3 component to themain flow (Variable Loop End node) viaflow variable connection3. Open the Page 3 component andrearrange its composite view via the NodeUsage and Layout panel. Step 4. Set up the widgetYou want the user to select whether todisplay wrong or correct attemps,interactively. Hence,1. With a Column Filter node, filter the"Wrong Attempts" and "Correct Attempts"columns2. Pass this table to a Column SelectionWidget node.3. Configure the Column SelectionWidget node with the label "Attempts todisplay" to guide the user during theselection. Step 5. Set up the view1. Search the Choropleth Mapverified component on the KNIMECommunity Hub and add it to theworkflow -> https://kni.me/c/L8IzuxeVxBOw4qDm2. Provide the formatted data andconfigure with a meaningful title. 3. Set the "color_axis_var" to use theflow variable coming from the ColumnSelection Widget node Step 6. Create Page 4 -Dashboard Component1. Select all the nodes andcomponents in Page 4aand wrap them up into acomponent. Name it"Page 4a".2. Rearrange thecomponent compositeview.IMPORTANT: You wantthe user to update thechoropleth map view afterselecting a newconfiguration. What ismissing to enable the viewupdate? Step 7. Validate user input dataYou want to check whether the user entered valid data or justleft the default entries.1. With a Row Filter node, remove the entry if the emailaddress is "example@email.com" (default)2. Define a conditional path by adding an Empty TableSwitch node.3. Connect the first port of the Empty Table Switch node(non-empty table) to Page 4a - the user sees the dashboard4. Connect the second port of the Empty Table Switch node(empty table) to Page 4b - the user sees an error message Step 8. DeploymentUpload this workflow to KNIME Business Hub1. Right click the workflow in the KNIME Explorer andselect Upload to Server or Hub.2. Make sure to reset the workflow before uploadIn the Hub browser UI1. Create a new space version of the space containingthe workflow2. Create a deployment of this workflow as Data app3. Execute the Data app from the list of deployments Show match results read localmatch_results.csvSelect image andnames columnsCounting Loop Start Variable Loop End Table View Data CollectionForm Match data Table Rowto Variable Table Rowto Variable Page 4b -Error Message Format Data forChoropleth Map Play Welcome

Nodes

Extensions

Links

Download

To use this workflow in KNIME, download it from the below URL and open it in KNIME:

Download Workflow
Created by: emilio.silvestri
Created at: 2022-03-17
On NodePit since: 2023-04-06
Last update: 2024-12-21
Created with KNIME version: v4.7.1
Tags: Education

Deploy, schedule, execute, and monitor your KNIME workflows locally, in the cloud or on-premises – with our brand new NodePit Runner.

Try NodePit Runner!