WGU D280 - JavaScript Programming | Task 1
WGU D280
JavaScript Programming - Task 1
Interactive Angular World Map, World Bank API & GitLab Performance
Assessment
2026/2027 Updated | Rubric Aligned
Purpose of this document
A complete technical exemplar for the current D280 interactive world map performance assessment. It is organized
directly around rubric sections A-H and includes implementation patterns, code, GitLab milestones, testing, evidence
guidance, and a final submission audit. Student-specific identifiers, repository links, Angular version output, and
screenshots must come from the student’s own environment.
Prepared from the current publicly available D280 task structure and official Angular and World Bank documentation.
2026/2027 Updated | Rubric-Aligned | Page 1
, WGU D280 - JavaScript Programming | Task 1
Document Control and Use
This resource is written as a conventional technical performance-assessment report. It follows the current D280
task structure verified on October 5, 2026. The WGU student portal remains the authoritative source if a student
sees different wording or an updated rubric.
No fabricated evidence
The GitLab URL, student ID, Angular version, branch-history screenshot, runtime screenshots, dates, and repository
history shown in a real submission must be authentic. This document provides exact placement guidance and
examples, but it does not invent student-specific evidence.
Assessment Profile
Item Current structure
Course D280 - JavaScript Programming
Assessment Task 1: Develop an Interactive World Map
Framework Angular
Visual asset Course-provided SVG world map
External data World Bank Country API
Repository WGU GitLab; work pushed to Working branch
Rubric A through H, including A1, A2, and F1
Core deliverable Functional Angular project plus required GitLab evidence
Current Evaluation Gates
The Working branch must contain the project files listed in rubric A2, including the SVG file.
The branch history must show commits corresponding to completion of rubric sections C, D, E, and F.
The repository URL is placed in Comments to Evaluator at submission.
The final branch-history screenshot must show commit messages and dates.
No external libraries, third-party packages, or frameworks beyond Angular should be added to create the
project.
2026/2027 Updated | Rubric-Aligned | Page 2
, WGU D280 - JavaScript Programming | Task 1
1. Assessment and Rubric Crosswalk
The project is a single-page Angular application. A user interacts with an SVG map of the world, selects a country,
and views country information returned by the World Bank API. The implementation below keeps presentation
logic in an Angular component, HTTP logic in a service, and navigation in Angular Router.
Rubric Requirement Implementation in this resource
A GitLab repository Create/clone project; use Working branch;
commit and push after C, D, E, F; provide
repository URL; branch-history screenshot
with messages and dates.
A1 README Include student ID and the Angular version
used in the project.
A2 Project files Working branch includes src,
tsconfig.app.json, tsconfig.json,
tsconfig.spec.json, angular.json,
package.json, package-lock.json, README,
and SVG.
B SVG map Use the required SVG world map as the
visual interface.
C API properties Display country name, capital, region, income
level, and two additional properties. This
implementation uses latitude and longitude.
D Angular routing Redirect root/default URL automatically to a
nonblank route such as /map.
E HTML layout Two columns: world map and country-
information panel.
F Angular conversion Use Angular event binding to make the SVG
interactive.
F1 Mouse handler Connect SVG to a mouse event handler that
transmits selection data for processing.
G API service Use HttpClient; service method accepts a
two-letter country code; component method
triggers it and stores the returned country
data.
H Professional communication Professional, clear, coherent content and
presentation.
Important interpretation of C
Latitude and longitude are not fixed WGU fields. The rubric requires four named properties plus two properties
chosen by the student. Latitude and longitude are used here because the World Bank Country API returns both
directly and they are easy to verify.
2026/2027 Updated | Rubric-Aligned | Page 3
, WGU D280 - JavaScript Programming | Task 1
2. Solution Architecture
Figure 1. Logical flow from SVG interaction to World Bank data display.
The design deliberately separates concerns. The template contains the map and information panel.
WorldMapComponent handles the selected country and user-interface state. WorldBankService performs the
HTTP request and converts the external response into a small CountryInfo object. This keeps network logic out of
the template and makes rubric G easy to demonstrate.
Application Flow
1. Angular loads the root URL and Router redirects the user to /map.
2. The map component renders a two-column page with the course-provided SVG on the left and country details
on the right.
3. A click on an SVG country path bubbles to the SVG-level Angular event binding.
4. The mouse handler reads the selected path id as a two-letter country code.
5. The component calls WorldBankService.getCountry(code).
6. HttpClient requests the World Bank country endpoint.
7. The service maps the nested response to CountryInfo.
8. Angular updates the right-hand panel without a page reload.
Recommended Project Structure
Recommended file tree
src/
app/
app.component.html
app.component.ts
app.config.ts
app.routes.ts
models/
country-info.ts
services/
2026/2027 Updated | Rubric-Aligned | Page 4
WGU D280
JavaScript Programming - Task 1
Interactive Angular World Map, World Bank API & GitLab Performance
Assessment
2026/2027 Updated | Rubric Aligned
Purpose of this document
A complete technical exemplar for the current D280 interactive world map performance assessment. It is organized
directly around rubric sections A-H and includes implementation patterns, code, GitLab milestones, testing, evidence
guidance, and a final submission audit. Student-specific identifiers, repository links, Angular version output, and
screenshots must come from the student’s own environment.
Prepared from the current publicly available D280 task structure and official Angular and World Bank documentation.
2026/2027 Updated | Rubric-Aligned | Page 1
, WGU D280 - JavaScript Programming | Task 1
Document Control and Use
This resource is written as a conventional technical performance-assessment report. It follows the current D280
task structure verified on October 5, 2026. The WGU student portal remains the authoritative source if a student
sees different wording or an updated rubric.
No fabricated evidence
The GitLab URL, student ID, Angular version, branch-history screenshot, runtime screenshots, dates, and repository
history shown in a real submission must be authentic. This document provides exact placement guidance and
examples, but it does not invent student-specific evidence.
Assessment Profile
Item Current structure
Course D280 - JavaScript Programming
Assessment Task 1: Develop an Interactive World Map
Framework Angular
Visual asset Course-provided SVG world map
External data World Bank Country API
Repository WGU GitLab; work pushed to Working branch
Rubric A through H, including A1, A2, and F1
Core deliverable Functional Angular project plus required GitLab evidence
Current Evaluation Gates
The Working branch must contain the project files listed in rubric A2, including the SVG file.
The branch history must show commits corresponding to completion of rubric sections C, D, E, and F.
The repository URL is placed in Comments to Evaluator at submission.
The final branch-history screenshot must show commit messages and dates.
No external libraries, third-party packages, or frameworks beyond Angular should be added to create the
project.
2026/2027 Updated | Rubric-Aligned | Page 2
, WGU D280 - JavaScript Programming | Task 1
1. Assessment and Rubric Crosswalk
The project is a single-page Angular application. A user interacts with an SVG map of the world, selects a country,
and views country information returned by the World Bank API. The implementation below keeps presentation
logic in an Angular component, HTTP logic in a service, and navigation in Angular Router.
Rubric Requirement Implementation in this resource
A GitLab repository Create/clone project; use Working branch;
commit and push after C, D, E, F; provide
repository URL; branch-history screenshot
with messages and dates.
A1 README Include student ID and the Angular version
used in the project.
A2 Project files Working branch includes src,
tsconfig.app.json, tsconfig.json,
tsconfig.spec.json, angular.json,
package.json, package-lock.json, README,
and SVG.
B SVG map Use the required SVG world map as the
visual interface.
C API properties Display country name, capital, region, income
level, and two additional properties. This
implementation uses latitude and longitude.
D Angular routing Redirect root/default URL automatically to a
nonblank route such as /map.
E HTML layout Two columns: world map and country-
information panel.
F Angular conversion Use Angular event binding to make the SVG
interactive.
F1 Mouse handler Connect SVG to a mouse event handler that
transmits selection data for processing.
G API service Use HttpClient; service method accepts a
two-letter country code; component method
triggers it and stores the returned country
data.
H Professional communication Professional, clear, coherent content and
presentation.
Important interpretation of C
Latitude and longitude are not fixed WGU fields. The rubric requires four named properties plus two properties
chosen by the student. Latitude and longitude are used here because the World Bank Country API returns both
directly and they are easy to verify.
2026/2027 Updated | Rubric-Aligned | Page 3
, WGU D280 - JavaScript Programming | Task 1
2. Solution Architecture
Figure 1. Logical flow from SVG interaction to World Bank data display.
The design deliberately separates concerns. The template contains the map and information panel.
WorldMapComponent handles the selected country and user-interface state. WorldBankService performs the
HTTP request and converts the external response into a small CountryInfo object. This keeps network logic out of
the template and makes rubric G easy to demonstrate.
Application Flow
1. Angular loads the root URL and Router redirects the user to /map.
2. The map component renders a two-column page with the course-provided SVG on the left and country details
on the right.
3. A click on an SVG country path bubbles to the SVG-level Angular event binding.
4. The mouse handler reads the selected path id as a two-letter country code.
5. The component calls WorldBankService.getCountry(code).
6. HttpClient requests the World Bank country endpoint.
7. The service maps the nested response to CountryInfo.
8. Angular updates the right-hand panel without a page reload.
Recommended Project Structure
Recommended file tree
src/
app/
app.component.html
app.component.ts
app.config.ts
app.routes.ts
models/
country-info.ts
services/
2026/2027 Updated | Rubric-Aligned | Page 4
