ui.html

<style>
  body {
    font-family: "Inter", sans-serif;
    padding: 24px;
    background-color: #f3f5f7;
    color: #202020;
    /* text color */
  }

  h1 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 32px;
  }

  /* Container for the two divs */
  .outer {
    display: flex;
    gap: 64px;
    align-items: flex-start;
  }
  /* styling for left and right containers */
  #left,
  #right {
    flex: 1;
    min-width: 0;
  }

  .question-item {
    /* Container for each question in the left panel */
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px 24px;
    width: 100%;
    margin: 0;
    margin-bottom: 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease, border-color 0.2s ease,
      box-shadow 0.2s ease;
    font-size: 16px;
    font-weight: 600;
    color: #202020;
    text-align: left;
    font-family: inherit;
  }

  .question-item.active-question-item {
    /* Styling for the current question the user is answering */
    border: 2px solid #562672;
    background-color: #f8f0ff;
    box-shadow: 0px 2px 6px rgba(86, 38, 114, 0.15);
  }
  .question-item.active-question-item:hover,
  .question-item.active-question-item:focus-within {
    border-color: #411d56;
    background-color: #f5ebfe;
  }

  .question-text {
    /* Span containing the actual question text */
    overflow: hidden;
    white-space: normal; /* Allow wrapping */
    flex-grow: 1;
  }

  .selected-answer-text {
    /* Span showing the selected answer for past questions */
    font-weight: 400;
    font-size: 14px;
    color: #562672;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #f5ebfe;
    padding: 4px 8px;
    border-radius: 4px;
  }

  .answerButton {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
    width: 100%;
    margin: 0;
    margin-bottom: 16px;
    box-sizing: border-box;

    /* Text */
    font-size: 16px;
    font-weight: 600;
    color: #202020;
    text-align: left;
    font-family: inherit;
  }

  .answerButton:hover,
  .answerButton:focus {
    background-color: #f8f8f8;
    border-color: #cccccc;
    box-shadow: 0px 4px 8px 0px rgba(32, 32, 32, 0.16);
  }

  /* Span containing the actual question text */
  .text {
    overflow: hidden;
    white-space: normal;
    display: inline-flex;
    align-items: center;
  }

  .hidden {
    display: none;
  }

  .visible {
    display: block;
  }

  /* Reset button style */
  #resetButton {
    background-color: #ffffff;
    color: #202020;
    border: 1px solid #562672;
    border-radius: 4px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease,
      border-color 0.3s ease;
    margin-top: 0;
    text-align: center;
    width: 150px;
    position: absolute;
    top: 24px;
    right: 24px;
  }

  #resultsContainer {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
    width: 100%;
    margin: 0;
    margin-bottom: 16px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 400;
    color: #202020;
    text-align: left;
    font-family: inherit;
  }

  #resultsContainer h3 {
    font-size: 24px;
    font-weight: 400;
  }

  #resultsContainer p {
    font-size: 16px;
    margin-bottom: 8px;
  }

  #hexVisual {
    width: 96px;
    height: 48px;
    border-radius: 4px;
    border-color: #202020;
    border: solid 1px;
    margin-top: 8px;
  }

  #tokenDescriptionDisplay {
    color: #202020;
    font-weight: 400;
    font-style: italic;
    white-space: pre-wrap;
  }

  #resetButton:hover {
    background-color: #ffffff;
    border-color: #411d56;
    box-shadow: 0px 2px 4px 0px rgba(32, 32, 32, 0.08);
  }

  @media (min-width: 768px) {
    .outer {
      flex-direction: row;
      /* Side-by-side columns */
      gap: 64px;
      align-items: flex-start;
      /* Align to top */
    }
    .question-item {
      font-size: 18px;
    }
    .answerButton {
      font-size: 18px;
    }
    .selected-answer-text {
      font-size: 16px;
    }
  }
</style>

<h1>Axis Token Picker</h1>
<button id="resetButton">Reset</button>
<div id="outer" class="outer">
  <div id="left"></div>
  <div id="right">
    <div id="currentAnswersContainer" class="visible"></div>
    <div id="resultsContainer" class="hidden">
      <h3>Your Token Details:</h3>
      <p><strong>Token Path:</strong> <span id="tokenPathDisplay"></span></p>
      <p>
        <strong>Figma Syntax:</strong> <span id="figmaSyntaxDisplay"></span>
      </p>
      <p><strong>Hex Value:</strong> <span id="tokenHexDisplay"></span></p>
      <div id="hexVisual"></div>
      <p>
        <strong>Description:</strong> <span id="tokenDescriptionDisplay"></span>
      </p>
    </div>
  </div>
</div>

<script src="tokenMapping.js"></script>
<script src="q&a.js"></script>
<script>
  //Waits for the HTMl to fully load
  document.addEventListener("DOMContentLoaded", () => {
    const leftPanel = document.getElementById("left");
    const currentAnswersContainer = document.getElementById(
      "currentAnswersContainer"
    );
    const resultsContainer = document.getElementById("resultsContainer");
    const resetButton = document.getElementById("resetButton");

    // Result display elements
    const tokenPathDisplay = document.getElementById("tokenPathDisplay");
    const figmaSyntaxDisplay = document.getElementById("figmaSyntaxDisplay");
    const tokenHexDisplay = document.getElementById("tokenHexDisplay");
    const hexVisual = document.getElementById("hexVisual");
    const tokenDescriptionDisplay = document.getElementById(
      "tokenDescriptionDisplay"
    );

    let currentQuestionId = null; // question ID currently displayed
    let currentUserAnswerPath = []; //array to store sequence of answeer IDs
    let currentQuestionHistory = []; //array to store questions already answered

    function findQuestionById(id) {
      // Ensure allQuestions is available
      if (typeof allQuestions === "undefined" || !allQuestions) {
        console.error("allQuestions is not defined!");
        return undefined;
      }
      return allQuestions.find((q) => q.id === id);
    }

    function setVisibility(element, show) {
      if (element) {
        if (show) {
          element.classList.remove("hidden");
          element.classList.add("visible");
        } else {
          element.classList.add("hidden");
          element.classList.remove("visible");
        }
      }
    }

    function renderLeftPanel() {
      if (!leftPanel) {
        console.error("leftPanel element not found");
        return;
      }
      leftPanel.innerHTML = ""; // Clear previous content

      // Render history
      currentQuestionHistory.forEach((item) => {
        const historyItemDiv = document.createElement("div");
        historyItemDiv.classList.add("question-item", "visible");
        historyItemDiv.innerHTML = `
                <span class="question-text">${item.text}</span>
                <span class="selected-answer-text">${item.selectedAnswerText}</span>
            `;
        leftPanel.appendChild(historyItemDiv);
      });

      // Render current question
      const currentQuestion = findQuestionById(currentQuestionId);
      if (currentQuestion) {
        const currentQuestionDiv = document.createElement("div");
        currentQuestionDiv.classList.add(
          "question-item",
          "visible",
          "active-question-item"
        );
        currentQuestionDiv.innerHTML = `<span class="question-text">${currentQuestion.text}</span>`;
        leftPanel.appendChild(currentQuestionDiv);
      }
    }

    function displayCurrentAnswers() {
      if (!currentAnswersContainer) {
        console.error("currentAnswersContainer element not found");
        return;
      }
      currentAnswersContainer.innerHTML = "";
      setVisibility(resultsContainer, false); // Hide results when new answers are shown

      const question = findQuestionById(currentQuestionId);
      if (!question) {
        setVisibility(currentAnswersContainer, false);
        return;
      }

      // Ensure question.answers is an array before trying to iterate
      if (Array.isArray(question.answers)) {
        question.answers.forEach((answer) => {
          const button = document.createElement("button");
          button.classList.add("answerButton");
          button.dataset.answerId = answer.id;
          button.dataset.nextQuestion = answer.nextQuestion || "";
          button.textContent = answer.text;
          button.addEventListener("click", handleAnswerSelection);
          currentAnswersContainer.appendChild(button);
        });
        setVisibility(currentAnswersContainer, true);
      } else {
        console.error(
          "Question.answers is not an array for questionId:",
          currentQuestionId
        );
        setVisibility(currentAnswersContainer, false);
      }
    }

    function handleAnswerSelection(event) {
      const selectedButton = event.currentTarget;
      const answerId = selectedButton.dataset.answerId;
      const nextQuestion = selectedButton.dataset.nextQuestion;
      const answerText = selectedButton.textContent;

      const questionBeingAnswered = findQuestionById(currentQuestionId);
      if (!questionBeingAnswered) {
        console.error(
          "Error: Could not find the question being answered. CurrentQuestionId:",
          currentQuestionId
        );
        return;
      }
      //add answered Qs to history
      currentQuestionHistory.push({
        questionId: questionBeingAnswered.id,
        text: questionBeingAnswered.text,
        selectedAnswerId: answerId,
        selectedAnswerText: answerText,
      });

      // add selected answer IDs to path
      currentUserAnswerPath.push(answerId);

      if (nextQuestion) {
        currentQuestionId = nextQuestion;
        renderLeftPanel();
        displayCurrentAnswers();
      } else {
        currentQuestionId = null;
        renderLeftPanel();
        displayCurrentAnswers();
        const tokenDetails = getTokenDetailsForUserPath(currentUserAnswerPath);
        displayResults(tokenDetails);
      }
    }

    function displayResults(details) {
      if (
        !resultsContainer ||
        !tokenPathDisplay ||
        !figmaSyntaxDisplay ||
        !tokenHexDisplay ||
        !hexVisual
      ) {
        console.error("One or more results display elements are missing.");
        return;
      }
      setVisibility(currentAnswersContainer, false);
      setVisibility(resultsContainer, true);

      if (details.error) {
        tokenPathDisplay.textContent = "Error";
        figmaSyntaxDisplay.textContent = details.error;
        tokenHexDisplay.textContent = `Path: ${
          details.userAnswerPathAttempted ||
          details.referencePathAttempted ||
          "N/A"
        }`;
        hexVisual.style.backgroundColor = "transparent";
      } else {
        tokenPathDisplay.textContent = details.tokenPath || "N/A";
        figmaSyntaxDisplay.textContent = details.figmaSyntax || "N/A";
        tokenHexDisplay.textContent = details.hexValue || "N/A";
        tokenDescriptionDisplay.textContent =
          details.description || "No description available.";

        if (
          details.hexValue &&
          details.hexValue !== "N/A" &&
          details.hexValue !== "Alias Resolution Error"
        ) {
          hexVisual.style.backgroundColor = details.hexValue;
        } else {
          hexVisual.style.backgroundColor = "transparent";
        }
      }
    }

    // Resets the application to its initial state.
    function resetApp() {
      currentUserAnswerPath = [];
      currentQuestionHistory = [];

      if (
        typeof allQuestions !== "undefined" &&
        allQuestions &&
        allQuestions.length > 0
      ) {
        currentQuestionId = allQuestions[0].id;
      } else {
        currentQuestionId = null;
        console.error(
          "allQuestions array is empty or not defined. UI cannot initialize questions."
        );
        if (leftPanel)
          leftPanel.innerHTML = `<div class="question-item visible">Error: Question data is missing or not loaded.</div>`;
        if (currentAnswersContainer) currentAnswersContainer.innerHTML = "";
        setVisibility(resultsContainer, false);
        return;
      }

      if (currentQuestionId) {
        renderLeftPanel();
        displayCurrentAnswers();
      } else {
        if (leftPanel)
          leftPanel.innerHTML = `<div class="question-item visible">No questions defined.</div>`;
        if (currentAnswersContainer) currentAnswersContainer.innerHTML = "";
      }
      setVisibility(resultsContainer, false);
    }

    if (resetButton) {
      resetButton.addEventListener("click", resetApp);
    } else {
      console.error("Reset button not found.");
    }

    // Initial load
    resetApp();
  });
</script>