WGU D280 JAVASCRIPT PROGRAMMING TASK 1 –
INTERACTIVE ANGULAR WORLD MAP (WORLD BANK API & GITLAB)
COMPREHENSIVE PRACTICE (2026/2027 EDITION)
ANGULAR · TYPESCRIPT · WORLD BANK API · INTERACTIVE MAPS · GITLAB · TESTING & PERFORMANCE ·
RUBRIC ALIGNMENT
SOFTWARE DEVELOPMENT · 2026/2027 EDITION
200 7 25–30 A–D
QUESTIONS SECTIONS PER SECTION ONE BEST ANSWER
Student name: ________________________________________ Date: ____________________
Course: D280 JavaScript Programming Score: _________ / 200
Instructions to Candidates
1. This practice bank contains 200 questions in seven sections (30 + 30 + 30 + 30 + 25 + 25 + 30), numbered
Q1–Q200. Each item has four options (A–D) and exactly one correct answer.
2. Items cover Angular fundamentals, JavaScript and TypeScript, World Bank API integration, interactive map
implementation, GitLab workflow, testing and performance, and rubric-aligned submission requirements.
3. The correct option is marked [CORRECT], followed by the answer letter and a brief rationale explaining why the key is
right and why each distractor fails.
4. Suggested pacing: about 45 seconds per question, or 150 minutes for the full bank. Record one letter per item.
Examination Blueprint
Section Content Questions
1 Angular Fundamentals & Application Setup – Components, Modules, Services, Routing 1–30
2 JavaScript & TypeScript Core Concepts – Variables, Functions, Promises, Async/Await 31–60
3 World Bank API Integration – HTTP Client, Data Parsing, Error Handling 61–90
4 Interactive World Map Implementation – Map Rendering, Data Binding, User Interaction 91–120
GitLab Version Control & Repository Management – Git Commands, Branching, Merge
5 121–145
Requests
6 Testing, Debugging & Performance Optimization – Unit Testing, Debugging, Optimization 146–170
Rubric Alignment & Submission Requirements – Task Requirements, Documentation,
7 171–200
Submission Checklist
Scoring & Review Guide (per 200-question bank)
Score Performance band Recommended follow-up
180–200 Excellent Confirm mastery; review missed items for content gaps only.
160–179 Proficient Re-read the rationale for each miss and restate the key concept.
140–159 Developing Re-study the two weakest sections before the assessment.
Below 140 Targeted remediation Rebuild each weak domain using the section rationales.
,WGU D280 JAVASCRIPT PROGRAMMING · TASK 1 PRACTICE 2026/2027 Edition
Section 1: Angular Fundamentals & Application Setup – Components, Modules, Services, Routing
(30 questions)
Q1. Which Angular CLI command creates a new application with a routing-ready project structure?
A. ng new my-app [CORRECT]
B. ng start my-app
C. npm create angular my-app
D. ng init my-app
Correct Answer: A
Rationale: ng new scaffolds a complete Angular workspace with configuration, source files, and dependencies. ng start (B) is
not a CLI command, npm create angular (C) is not the supported scaffold, and ng init (D) is not used to create a workspace.
Q2. A developer runs the application locally while editing files. Which command serves the project with live reload?
A. ng build
B. ng deploy
C. ng test
D. ng serve [CORRECT]
Correct Answer: D
Rationale: ng serve runs the development server with live reload on a local port. ng build (A) produces static output, ng test
(C) runs unit tests, and ng deploy (B) publishes to a hosting provider.
Q3. Which command generates a component named country-map inside the current project?
A. ng generate component country-map [CORRECT]
B. ng add component country-map
C. ng create component country-map
D. ng generate service country-map
Correct Answer: A
Rationale: ng generate component creates the component class, template, styles, and test file. ng add (B) installs libraries, ng
create (C) is not a command, and generating a service (D) creates a different artifact.
Q4. In a standalone Angular application, where are providers such as provideRouter and provideHttpClient
registered?
A. In the component template.
B. In app.config.ts, passed to bootstrapApplication. [CORRECT]
C. In the index.html file.
D. In the styles.css file.
Correct Answer: B
Rationale: Standalone applications register application-wide providers in app.config.ts, which bootstrapApplication consumes.
Templates (A), index.html (C), and global styles (D) cannot register Angular providers.
Q5. Which lifecycle hook is the best place to start an HTTP request that depends on an @Input value?
A. The constructor.
B. ngOnInit. [CORRECT]
C. ngAfterViewChecked.
D. ngOnDestroy.
Correct Answer: B
Rationale: ngOnInit runs after Angular has set the first round of input properties, so the input is available. The constructor (A)
runs before inputs are set, ngAfterViewChecked (C) runs far too often, and ngOnDestroy (D) is for cleanup.
Interactive Angular World Map | 200 Questions | 7 Sections Page 2
,WGU D280 JAVASCRIPT PROGRAMMING · TASK 1 PRACTICE 2026/2027 Edition
Q6. A service must be available across the entire application without being listed in a module's providers array. Which
declaration accomplishes this?
A. @NgModule({ bootstrap: [] })
B. @Component({ standalone: true })
C. @Injectable({ providedIn: 'root' }) [CORRECT]
D. @Directive({ selector: '[appData]' })
Correct Answer: C
Rationale: providedIn: 'root' registers the service with the root injector and creates a single shared instance. The component
(B), module bootstrap (A), and directive (D) decorators do not declare an injectable provider.
Q7. Which decorator property connects a component class to its HTML template file?
A. selector
B. providers
C. styleUrls
D. templateUrl [CORRECT]
Correct Answer: D
Rationale: templateUrl points to the external HTML file used by the component. selector (A) defines the HTML tag, styleUrls
(C) links stylesheets, and providers (B) registers dependencies.
Q8. A component must display a value from its class inside a heading. Which syntax performs that one-way data
binding?
A. [[countryName]]
B. [countryName]
C. (countryName)
D. {{ countryName }} [CORRECT]
Correct Answer: D
Rationale: Double curly braces are interpolation and render the class value as text. Square brackets (B) are property binding,
parentheses (C) are event binding, and double brackets (A) are not Angular syntax.
Q9. A button must call a component method named loadData when clicked. Which template syntax is correct?
A. (click)="loadData()" [CORRECT]
B. [click]="loadData()"
C. {{ click: loadData() }}
D. *click="loadData()"
Correct Answer: A
Rationale: Parentheses denote event binding, so (click) subscribes to the click event and calls the method. Square brackets
(B) are property binding, interpolation (C) is invalid here, and an asterisk (D) marks structural directives.
Q10. A developer wants two-way binding for a search field using ngModel. Which additional module or provider is
required?
A. CommonModule
B. RouterModule
C. HttpClientModule
D. FormsModule [CORRECT]
Correct Answer: D
Rationale: ngModel is part of FormsModule, which must be imported by the standalone component or its module.
RouterModule (B), HttpClientModule (C), and CommonModule (A) do not provide ngModel.
Interactive Angular World Map | 200 Questions | 7 Sections Page 3
, WGU D280 JAVASCRIPT PROGRAMMING · TASK 1 PRACTICE 2026/2027 Edition
Q11. Which structural directive repeats a block of markup once for each country in an array?
A. (ngFor)="countries"
B. [ngFor]="countries"
C. *ngFor="let country of countries" [CORRECT]
D. ngFor="countries"
Correct Answer: C
Rationale: Structural directives use an asterisk and a microsyntax expression; *ngFor repeats the host element. The other
forms (B, A, D) are not valid Angular syntax.
Q12. In Angular's built-in control flow, which block replaces *ngIf with an else template?
A. #if (loaded) { ... }
B. @if (loaded) { ... } @else { ... } [CORRECT]
C. *if="loaded; else loading"
D. [if]="loaded"
Correct Answer: B
Rationale: Angular's built-in @if block supports @else and @else if directly in the template. The other forms (A, C, D) are not
valid control-flow syntax.
Q13. Which directive adds or removes CSS classes based on component state?
A. ngSwitch
B. ngModel
C. ngClass [CORRECT]
D. ngTemplateOutlet
Correct Answer: C
Rationale: ngClass conditionally applies one or more classes. ngModel (B) handles form values, ngSwitch (A) selects among
templates, and ngTemplateOutlet (D) renders a template reference.
Q14. Which selector renders the component matched by the current route?
A. <ng-container></ng-container>
B. <router-link></router-link>
C. <router-outlet></router-outlet> [CORRECT]
D. <app-root></app-root>
Correct Answer: C
Rationale: router-outlet is the placeholder where the router instantiates the active component. router-link (B) is not an Angular
element, ng-container (A) is a grouping element, and app-root (D) is the bootstrap host.
Q15. A user should navigate to the detail view without a full page reload. Which directive is appropriate?
A. href
B. routerLink [CORRECT]
C. action
D. ngHref
Correct Answer: B
Rationale: routerLink uses the Angular router and updates the view without a browser reload. A plain href (A) triggers a full
navigation, action (C) belongs to forms, and ngHref (D) is not an Angular directive.
Interactive Angular World Map | 200 Questions | 7 Sections Page 4
INTERACTIVE ANGULAR WORLD MAP (WORLD BANK API & GITLAB)
COMPREHENSIVE PRACTICE (2026/2027 EDITION)
ANGULAR · TYPESCRIPT · WORLD BANK API · INTERACTIVE MAPS · GITLAB · TESTING & PERFORMANCE ·
RUBRIC ALIGNMENT
SOFTWARE DEVELOPMENT · 2026/2027 EDITION
200 7 25–30 A–D
QUESTIONS SECTIONS PER SECTION ONE BEST ANSWER
Student name: ________________________________________ Date: ____________________
Course: D280 JavaScript Programming Score: _________ / 200
Instructions to Candidates
1. This practice bank contains 200 questions in seven sections (30 + 30 + 30 + 30 + 25 + 25 + 30), numbered
Q1–Q200. Each item has four options (A–D) and exactly one correct answer.
2. Items cover Angular fundamentals, JavaScript and TypeScript, World Bank API integration, interactive map
implementation, GitLab workflow, testing and performance, and rubric-aligned submission requirements.
3. The correct option is marked [CORRECT], followed by the answer letter and a brief rationale explaining why the key is
right and why each distractor fails.
4. Suggested pacing: about 45 seconds per question, or 150 minutes for the full bank. Record one letter per item.
Examination Blueprint
Section Content Questions
1 Angular Fundamentals & Application Setup – Components, Modules, Services, Routing 1–30
2 JavaScript & TypeScript Core Concepts – Variables, Functions, Promises, Async/Await 31–60
3 World Bank API Integration – HTTP Client, Data Parsing, Error Handling 61–90
4 Interactive World Map Implementation – Map Rendering, Data Binding, User Interaction 91–120
GitLab Version Control & Repository Management – Git Commands, Branching, Merge
5 121–145
Requests
6 Testing, Debugging & Performance Optimization – Unit Testing, Debugging, Optimization 146–170
Rubric Alignment & Submission Requirements – Task Requirements, Documentation,
7 171–200
Submission Checklist
Scoring & Review Guide (per 200-question bank)
Score Performance band Recommended follow-up
180–200 Excellent Confirm mastery; review missed items for content gaps only.
160–179 Proficient Re-read the rationale for each miss and restate the key concept.
140–159 Developing Re-study the two weakest sections before the assessment.
Below 140 Targeted remediation Rebuild each weak domain using the section rationales.
,WGU D280 JAVASCRIPT PROGRAMMING · TASK 1 PRACTICE 2026/2027 Edition
Section 1: Angular Fundamentals & Application Setup – Components, Modules, Services, Routing
(30 questions)
Q1. Which Angular CLI command creates a new application with a routing-ready project structure?
A. ng new my-app [CORRECT]
B. ng start my-app
C. npm create angular my-app
D. ng init my-app
Correct Answer: A
Rationale: ng new scaffolds a complete Angular workspace with configuration, source files, and dependencies. ng start (B) is
not a CLI command, npm create angular (C) is not the supported scaffold, and ng init (D) is not used to create a workspace.
Q2. A developer runs the application locally while editing files. Which command serves the project with live reload?
A. ng build
B. ng deploy
C. ng test
D. ng serve [CORRECT]
Correct Answer: D
Rationale: ng serve runs the development server with live reload on a local port. ng build (A) produces static output, ng test
(C) runs unit tests, and ng deploy (B) publishes to a hosting provider.
Q3. Which command generates a component named country-map inside the current project?
A. ng generate component country-map [CORRECT]
B. ng add component country-map
C. ng create component country-map
D. ng generate service country-map
Correct Answer: A
Rationale: ng generate component creates the component class, template, styles, and test file. ng add (B) installs libraries, ng
create (C) is not a command, and generating a service (D) creates a different artifact.
Q4. In a standalone Angular application, where are providers such as provideRouter and provideHttpClient
registered?
A. In the component template.
B. In app.config.ts, passed to bootstrapApplication. [CORRECT]
C. In the index.html file.
D. In the styles.css file.
Correct Answer: B
Rationale: Standalone applications register application-wide providers in app.config.ts, which bootstrapApplication consumes.
Templates (A), index.html (C), and global styles (D) cannot register Angular providers.
Q5. Which lifecycle hook is the best place to start an HTTP request that depends on an @Input value?
A. The constructor.
B. ngOnInit. [CORRECT]
C. ngAfterViewChecked.
D. ngOnDestroy.
Correct Answer: B
Rationale: ngOnInit runs after Angular has set the first round of input properties, so the input is available. The constructor (A)
runs before inputs are set, ngAfterViewChecked (C) runs far too often, and ngOnDestroy (D) is for cleanup.
Interactive Angular World Map | 200 Questions | 7 Sections Page 2
,WGU D280 JAVASCRIPT PROGRAMMING · TASK 1 PRACTICE 2026/2027 Edition
Q6. A service must be available across the entire application without being listed in a module's providers array. Which
declaration accomplishes this?
A. @NgModule({ bootstrap: [] })
B. @Component({ standalone: true })
C. @Injectable({ providedIn: 'root' }) [CORRECT]
D. @Directive({ selector: '[appData]' })
Correct Answer: C
Rationale: providedIn: 'root' registers the service with the root injector and creates a single shared instance. The component
(B), module bootstrap (A), and directive (D) decorators do not declare an injectable provider.
Q7. Which decorator property connects a component class to its HTML template file?
A. selector
B. providers
C. styleUrls
D. templateUrl [CORRECT]
Correct Answer: D
Rationale: templateUrl points to the external HTML file used by the component. selector (A) defines the HTML tag, styleUrls
(C) links stylesheets, and providers (B) registers dependencies.
Q8. A component must display a value from its class inside a heading. Which syntax performs that one-way data
binding?
A. [[countryName]]
B. [countryName]
C. (countryName)
D. {{ countryName }} [CORRECT]
Correct Answer: D
Rationale: Double curly braces are interpolation and render the class value as text. Square brackets (B) are property binding,
parentheses (C) are event binding, and double brackets (A) are not Angular syntax.
Q9. A button must call a component method named loadData when clicked. Which template syntax is correct?
A. (click)="loadData()" [CORRECT]
B. [click]="loadData()"
C. {{ click: loadData() }}
D. *click="loadData()"
Correct Answer: A
Rationale: Parentheses denote event binding, so (click) subscribes to the click event and calls the method. Square brackets
(B) are property binding, interpolation (C) is invalid here, and an asterisk (D) marks structural directives.
Q10. A developer wants two-way binding for a search field using ngModel. Which additional module or provider is
required?
A. CommonModule
B. RouterModule
C. HttpClientModule
D. FormsModule [CORRECT]
Correct Answer: D
Rationale: ngModel is part of FormsModule, which must be imported by the standalone component or its module.
RouterModule (B), HttpClientModule (C), and CommonModule (A) do not provide ngModel.
Interactive Angular World Map | 200 Questions | 7 Sections Page 3
, WGU D280 JAVASCRIPT PROGRAMMING · TASK 1 PRACTICE 2026/2027 Edition
Q11. Which structural directive repeats a block of markup once for each country in an array?
A. (ngFor)="countries"
B. [ngFor]="countries"
C. *ngFor="let country of countries" [CORRECT]
D. ngFor="countries"
Correct Answer: C
Rationale: Structural directives use an asterisk and a microsyntax expression; *ngFor repeats the host element. The other
forms (B, A, D) are not valid Angular syntax.
Q12. In Angular's built-in control flow, which block replaces *ngIf with an else template?
A. #if (loaded) { ... }
B. @if (loaded) { ... } @else { ... } [CORRECT]
C. *if="loaded; else loading"
D. [if]="loaded"
Correct Answer: B
Rationale: Angular's built-in @if block supports @else and @else if directly in the template. The other forms (A, C, D) are not
valid control-flow syntax.
Q13. Which directive adds or removes CSS classes based on component state?
A. ngSwitch
B. ngModel
C. ngClass [CORRECT]
D. ngTemplateOutlet
Correct Answer: C
Rationale: ngClass conditionally applies one or more classes. ngModel (B) handles form values, ngSwitch (A) selects among
templates, and ngTemplateOutlet (D) renders a template reference.
Q14. Which selector renders the component matched by the current route?
A. <ng-container></ng-container>
B. <router-link></router-link>
C. <router-outlet></router-outlet> [CORRECT]
D. <app-root></app-root>
Correct Answer: C
Rationale: router-outlet is the placeholder where the router instantiates the active component. router-link (B) is not an Angular
element, ng-container (A) is a grouping element, and app-root (D) is the bootstrap host.
Q15. A user should navigate to the detail view without a full page reload. Which directive is appropriate?
A. href
B. routerLink [CORRECT]
C. action
D. ngHref
Correct Answer: B
Rationale: routerLink uses the Angular router and updates the view without a browser reload. A plain href (A) triggers a full
navigation, action (C) belongs to forms, and ngHref (D) is not an Angular directive.
Interactive Angular World Map | 200 Questions | 7 Sections Page 4
