Action Buttons

Relevant source files

The following files were used as context for generating this wiki page:

• index.html
• README.md

Introduction

The Action Buttons are the primary interactive elements within the qib13 application's user interface. They serve as the entry points for triggering all core functionalities, which include generating encoding systems, encoding a generator code into a seed, recovering a generator code from a seed, and running batch tests.

All button elements and their corresponding logic are defined and handled within a single file, index.html. The buttons connect the HTML front-end to the JavaScript functions that execute the encoding and recovery operations. The styling for these buttons, including their different states (default, hover, disabled), is also self-contained within the <style> block of index.html.

Sources: index.html:11-14, 71-150, README.md:10-17

Button Overview

The application's functionality is exposed through several buttons, each located within a specific functional tab. Buttons are styled as either primary (button) or secondary (secondary-button).

Button Text	Tab	Associated Function	Description
Generate Systems	Generate Systems	generateSystems()	Creates a new set of encoding systems based on a master seed and count (N).
Use Default Systems	Generate Systems	useDefaultSystems()	Loads a predefined default set of 1 original and 10 deviation systems.
Generate 55-Letter Seed	Generate Seed	generateSeed()	Encodes a 13-letter generator code into a 55-letter seed using a selected system.
Recover Generator Code	Recover Code	recoverGeneratorCode()	Attempts to recover a 13-letter generator code from a 55-letter seed.
Run Batch Test	Batch Test	runBatchTest()	Executes a series of automated encode/recover tests to verify system integrity.
Clear Results	Batch Test	clearBatchResults()	Clears the results from the batch test display area.
Copy Seed / Copy Code	Generate Seed/Recover Code	copyToClipboard(text)	A utility button that appears on success to copy the output to the clipboard.

Sources: index.html:95-150

Styling and Appearance

Button appearance is controlled by CSS classes defined in the <style> block of index.html. There are three main button styles.

Class	Description	Key CSS Properties
.button	The primary action button style.	background: #4CAF50; color: white;
.secondary-button	A style for secondary or less-critical actions.	background: #757575;
.copy-button	A smaller button for copy-to-clipboard actions.	background: #2196F3; font-size: 12px;

All buttons share common properties for padding, border, and radius. They also have a :hover state for visual feedback and a :disabled state.

/* index.html:11-14 */
button { padding: 12px 20px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin-right: 10px; }
button:hover { background: #45a049; }
button:disabled { background: #cccccc; cursor: not-allowed; }

Sources: index.html:11-14, 29-32, 83-84

Core Action Flows

Each primary button initiates a specific logical flow, handled by JavaScript functions.

System Generation

This flow is triggered by the Generate Systems or Use Default Systems buttons. It populates the allSystems array, which is required for all other operations.

The diagram below illustrates the process initiated by generateSystems().

• generateSystems(): Reads user inputs, sets global configuration (currentMasterSeed, currentNumSystems), and orchestrates the creation of EncodingSystem objects. It uses setTimeout to prevent UI freezing during the generation of a large number of systems.
• useDefaultSystems(): A shortcut that calls the system generation logic with a hardcoded master seed and N=10.

Sources: index.html:95-98, 770-858

Seed Generation

The Generate 55-Letter Seed button encodes a 13-letter code into a 55-letter seed. The process depends on the selected mode (Original, Deviation, Random, or Specific).

This sequence diagram shows the interaction when generating a seed.

The generateSeed() function selects the appropriate EncodingSystem instance from the allSystems array based on the chosen mode and calls its generateSeed method.

Sources: index.html:125, 1005-1051

Generator Code Recovery

The Recover Generator Code button attempts to find the original 13-letter code from a 55-letter seed. The "Sequential Recovery" mode is the most comprehensive, iterating through all generated systems.

The flowchart below shows the logic for sequential recovery.

• recoverGeneratorCode(): This function manages the recovery process. In sequential mode, it iterates through allSystems, calling recoverGeneratorCode on each EncodingSystem instance inside a try...catch block. It stops and reports success on the first successful recovery. If no system succeeds, it reports a comprehensive failure.

Sources: index.html:147, 1053-1138

Batch Testing

The Run Batch Test button triggers an automated validation process to ensure the encoding and recovery mechanisms are working correctly across the generated systems.

• runBatchTest(): This function orchestrates the test. It generates a set of random generator codes, encodes them using random systems, and then attempts to recover each one by iterating through all available systems. Finally, it compiles and displays statistics like the success rate.

Sources: index.html:153, 1140-1210

Utility Actions

copyToClipboard(text)

This helper function is invoked by the "Copy" buttons that appear after a successful seed generation or code recovery. It dynamically creates a <textarea> element, populates it with the text to be copied, executes the browser's copy command, and removes the element. It also provides temporary visual feedback on the button itself.

// index.html:1220-1232
function copyToClipboard(text) {
    const textArea = document.createElement('textarea');
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    textArea.execCommand('copy');
    document.body.removeChild(textArea);
    
    const button = event.target;
    const originalText = button.textContent;
    button.textContent = 'Copied!';
    setTimeout(() => {
        button.textContent = originalText;
    }, 2000);
}

Sources: index.html:1220-1232

clearBatchResults()

A simple utility function connected to the Clear Results button in the "Batch Test" tab. Its only purpose is to clear any content from the batchResult display div.

Sources: index.html:154, 1216-1218