Output Display

Relevant source files

The following files were used as context for generating this wiki page. As this is a single-file application, different logical sections within index.html are treated as distinct sources for comprehensive analysis, alongside the project's README.md.

• index.html (UI Structure & CSS)
• index.html (System Generation & UI Logic)
• index.html (Seed Generation & Recovery Logic)
• index.html (Batch Test & Utility Logic)
• index.html (Core EncodingSystem Class)
• README.md

The Output Display system in qib13 is responsible for presenting the results of all major operations to the user. It provides dynamic, contextual feedback for system generation, seed creation, code recovery, and batch testing. The system uses a set of dedicated HTML containers and CSS classes to render information in a clear, structured, and color-coded manner, indicating the status (success, error, warning, info) of each operation.

This system is entirely implemented within index.html and is a critical component for user interaction, providing transparency into the application's internal state and the outcomes of cryptographic processes.

Core Display Components

The user interface is structured with specific div elements that act as containers for dynamic output. The appearance of the output is controlled by a set of predefined CSS classes.

HTML Output Containers

These div elements are the primary targets for JavaScript functions to inject result-based HTML content.

Container ID	Triggering Tab	Populated By Function(s)	Purpose
systemStatus	Generate Systems	finishSystemGeneration()	Displays the status after generating encoding systems.
generateResult	Generate Seed	generateSeed()	Shows the generated 55-letter seed or an error message.
recoverResult	Recover Code	recoverGeneratorCode()	Shows the recovered 13-letter code, attempt logs, or an error.
batchResult	Batch Test	runBatchTest()	Displays a summary and detailed log of the batch recovery test.

Sources: index.html:92-95, index.html:118, index.html:137, index.html:146

CSS Status Classes

These classes are applied to output content to provide immediate visual cues about the nature of the information being displayed.

Class Name	Color	Purpose
.success	Green	Indicates a successful operation.
.error	Red	Indicates a failure or error.
.warning	Orange	Highlights important notes or non-critical issues.
.info	Blue	Provides general informational messages.

Sources: index.html:23-26

System Generation Output

When a user generates new encoding systems, the finishSystemGeneration function is called to update the #systemStatus container.

The output provides a confirmation of success and a summary of the generated systems, including:

• Total number of systems.
• The master seed used for generation.
• A warning if the default master seed was used.
• An informational note advising the user to save their master seed.

Sources: index.html:819-835

The following diagram illustrates the flow of displaying system generation results.

Seed Generation Output

After a user attempts to generate a 55-letter seed, the generateSeed function populates the #generateResult container. The output varies based on whether the operation succeeded or failed.

Success Case

• A success message.
• The original 13-letter generator code.
• The newly generated 55-letter seed.
• The specific EncodingSystem used (ID and type).
• The master seed for reproducibility.
• "Copy" buttons for both the seed and the generator code.

Error Case

• An error message, typically indicating an invalid generator code format or that systems have not been generated yet.

The diagram below shows the sequence for generating a seed and displaying the output.

Code Recovery Output

The recoverGeneratorCode function provides the most detailed output, especially during a "Sequential Recovery" attempt. The results are displayed in the #recoverResult container.

Sequential Recovery Output

If the recovery is successful, the following information is displayed:

• A success message.
• The original seed and the recovered generator code.
• The ID and type of the EncodingSystem that succeeded.
• The total number of systems attempted.
• A progress bar showing how far into the list of systems the search progressed.
• A detailed Recovery Log (.attempt-log) listing the outcome of each system check.
• "Copy" buttons for the recovered code and the original seed.

If all systems fail, a final error message is displayed, including the error from the last attempted system.

This diagram shows the logic for updating the display during sequential recovery.

Batch Test Output

The runBatchTest function generates a comprehensive report in the #batchResult container. This serves as a health check for the generated systems.

The output includes:

1. Summary Statistics:
   • Total number of test cases.
   • Number of successful recoveries.
   • Total attempts made across all tests.
   • A calculated success rate percentage.
   • The master seed used for the test.
2. Detailed Results Log:
   • A list of results for each test case.
   • Each entry is color-coded (.success or .error).
   • Displays the generator code, expected system, actual system found, and number of attempts for that specific case.

Sources: index.html:1162-1193

Batch Test Result Fields

Field	Description
generatorCode	The random 13-letter code used for the test.
expectedSystem	The ID of the system used to generate the seed.
actualSystem	The ID of the system that successfully recovered the code.
attempts	Number of systems tried before a successful recovery.
Status	"SUCCESS" or "FAILED".

Sources: index.html:1182-1191

Helper Feedback Components

Copy to Clipboard

The copyToClipboard function provides immediate user feedback directly on the button that was clicked. When a user clicks a "Copy" button, the button's text changes to "Copied!" for 2 seconds before reverting to its original text. This confirms the action was successful without requiring a separate notification area.

// index.html:1203-1213
function copyToClipboard(text) {
    // ... clipboard logic ...
    const button = event.target;
    const originalText = button.textContent;
    button.textContent = 'Copied!';
    setTimeout(() => {
        button.textContent = originalText;
    }, 2000);
}

Sources: index.html:1203-1213