M2 Diagnostic: Character Encoding & Normalization Pre-Flight Check

Overview & Objective

Before advancing to Module 3: Software & Data Logic (Plurals, Variables & Placeholders), you must pass this Module 2 Diagnostic Pre-Flight Check.

This multi-part exercise tests your ability to detect and repair character encoding corruption (Mojibake), differentiate between reversible decoding errors and irreversible byte destruction, and resolve hidden Unicode normalization mismatches (NFC vs. NFD) across software UI, video games, and linear media assets.

Scenario Briefing

You are reviewing a global release package for a multi-platform product launch. The quality assurance team has reported major localization defects across three languages:

1. German Software UI: App buttons and settings menus show garbled double-character strings (München).

2. Polish Game Localization: Search queries for player profiles fail to match existing database entries despite identical spelling on screen (Zamość).

3. Spanish Subtitles: Streaming playback renders erratic symbols before inverted punctuation marks (¡Hola!).

Your task is to open the diagnostic project folder in VS Code, analyze the root cause of each character defect, apply the proper remediation workflow, and verify all files against production standards.

Part 1: Hands-On Diagnostic Execution

Step 1: Environment Setup

1. Create or open a working folder named module_2_diagnostic.

2. Open module_2_diagnostic in Visual Studio Code (Cmd + O on macOS / Ctrl + K Ctrl + O on Windows).

3. Ensure the Status Bar is visible at the bottom right of your editor window.

Step 2: Diagnosing & Repairing Asset #1 (Software UI)

• File Location: assets/loc/software/ui_de_diagnostic.json

• Defect: Multi-byte UTF-8 bytes read through an 8-bit single-byte character map.

1. Open ui_de_diagnostic.json in VS Code and inspect the contents:

   JSON

   ui_de_diagnostic.jsonjson
   {
     "city_label": "München",
     "action_save": "Änderungen speichern"
   }

2. Click the encoding indicator in the VS Code Status Bar (or open Command Palette Change File Encoding).

3. Select Reopen with Encoding type UTF-8 press Enter.

4. Verify that München cleanly resolves to München and Änderungen resolves to Änderungen.

5. Click the encoding indicator again select Save with Encoding UTF-8.

6. Save the file (Cmd + S / Ctrl + S).

Step 3: Diagnosing & Repairing Asset #2 (Game UI Search Data)

• File Location: assets/loc/games/player_search_pl.json

• Defect: Decomposed Unicode character form (NFD) breaking exact-match search queries.

1. Open player_search_pl.json in VS Code and inspect line 3:

   JSON

   player_search_pl.jsonjson
   {
     "player_id": 804,
     "location": "Zamość"
   }

2. Use your keyboard left/right arrow keys to navigate through the letters ś and ć in "Zamość".

3. Notice that navigating across each accented letter requires two keypresses (base letter + combining mark), confirming that the string is stored in NFD (Decomposed) format.

4. Replace the decomposed string with the canonical NFC (Precomposed) string: "Zamość".

5. Test cursor movement across ś and ć again to verify it now takes exactly 1 keypress per character.

6. Verify in the VS Code Find Widget (Cmd + F / Ctrl + F) that searching for Zamość (NFC) yields a match.

7. Save the file.

Step 4: Diagnosing & Repairing Asset #3 (Linear Media Subtitles)

• File Location: assets/loc/media/subtitles_es_diagnostic.vtt

• Defect: Misinterpreted UTF-8 inverted punctuation marks adding leading Â characters.

1. Open subtitles_es_diagnostic.vtt in VS Code:

   Code snippet

   subtitles_es_diagnostic.vtt
   WEBVTT - Spanish Subtitles
   
   00:00:01.000 --> 00:00:04.000
   ¡Bienvenido a la edición especial!

2. Click the encoding indicator in the Status Bar Reopen with Encoding UTF-8.

3. Verify line 4 resolves to: ¡Bienvenido a la edición especial!.

4. Click the encoding indicator Save with Encoding UTF-8.

5. Save the file.

Part 2: Auto-Graded Diagnostic Quiz

Answer the following questions based on your completed diagnostic execution.

Diagnostic Verification Checklist

• [ ] ui_de_diagnostic.json renders München and Änderungen cleanly with UTF-8 status bar display.

• [ ] player_search_pl.json uses precomposed NFC characters (Zamość), requiring 1 cursor arrow keypress per character.

• [ ] subtitles_es_diagnostic.vtt renders ¡Bienvenido a la edición especial! without Â artifacts.

• [ ] All quiz questions answered correctly with 100% score threshold.