app.js

// app.js
const questions = {
  start: {
    text: "Do you need unified reporting in the GA4 interface?",
    yes: "ga4_360",
    no: "bigquery",
    type: "question",
  },
  ga4_360: {
    text: "Do you have a GA4 360 subscription?",
    yes: "unified_view",
    no: "standard_ga4",
    type: "question",
  },
  unified_view: {
    text: "Do you want a truly unified view (understanding session stitching limitations)?",
    yes: "strategy3",
    no: "filtered_views_1",
    type: "question",
  },
  filtered_views_1: {
      text: "Do you want filtered views of single property data?",
      yes: "strategy4",
      no: "strategy1_a",
      type: "question"
  },
    strategy1_a: { //disambiguate which strategy 1
        text: "Use Strategy 1: Single GA4 Property, Multiple Data Streams",
        type: "result",
    },
  standard_ga4: {
    text: "Use Strategy 1: Single GA4 Property, Multiple Data Streams",
    yes: "data_limits", //lead to next question, a warning
    no: "data_limits", //same
      type: "result_interim",
  },
  data_limits: {
    text: "Are you concerned about hitting Standard GA4 data limits, or need strict data separation for governance?",
    yes: "consider_strategy2",
    no: null, // End of this branch, user is okay
    type: "question",
  },
  consider_strategy2: {
      text: "Consider Strategy 2 or upgrading to 360",
      type: "result",
  },
  bigquery: {
    text: "Do you primarily use BigQuery for analysis?",
    yes: "ga4_360_2",
    no: "strategy2_bq",
    type: "question",
  },
  ga4_360_2: {
    text: "Do you have a GA4 360 subscription?",
    yes: "filtered_views_2",
    no: "strategy2_a",
    type: "question",
  },
  filtered_views_2:{
      text: "Do you want filtered views of single property data?",
      yes: "strategy4",
      no: "strategy2_a",
      type: "question",
  },
    strategy2_a:{ //disambiguate strategy 2
        text: "Use Strategy 2: Multiple GA4 Properties with Cross-Domain Configuration",
        type: "result",
    },
  strategy2_bq: {
    text: "Use Strategy 2: Multiple GA4 Properties with Cross-Domain Configuration (and set up BigQuery integration)",
    type: "result",
  },
  strategy3: {
    text: "Use Strategy 3: GA4 360 Rollup Properties",
    type: "result",
  },
  strategy4: {
    text: "Use Strategy 4: GA4 360 Subproperties",
    type: "result",
  },
};

let currentQuestion = "start";

function displayQuestion() {
  const questionContainer = document.getElementById("question-container");
  questionContainer.innerHTML = ""; // Clear previous content

    const questionText = document.createElement("div");
    questionText.classList.add("question-text");
  questionText.textContent = questions[currentQuestion].text;
  questionContainer.appendChild(questionText);


    if (questions[currentQuestion].type === "question") {
        const buttonContainer = document.createElement("div");
        buttonContainer.classList.add("button-container");

          const yesButton = document.createElement("button");
          yesButton.textContent = "Yes";
          yesButton.classList.add("answer-button"); //consistent styling.
          yesButton.addEventListener("click", () => {
                currentQuestion = questions[currentQuestion].yes;

                displayQuestion();


          });
            buttonContainer.appendChild(yesButton)

          const noButton = document.createElement("button");
          noButton.textContent = "No";
        noButton.classList.add("answer-button");
          noButton.addEventListener("click", () => {
            currentQuestion = questions[currentQuestion].no;
              displayQuestion();
          });
            buttonContainer.appendChild(noButton)

        questionContainer.appendChild(buttonContainer);
    } else if (questions[currentQuestion].type === "result_interim") {

        //display it, link to next thing.
        const resultText = document.createElement("div");
        resultText.classList.add("result-text")
        resultText.textContent = questions[currentQuestion].text;
        questionContainer.appendChild(resultText)

          const nextButton = document.createElement("button");
          nextButton.textContent = "Next";
          nextButton.classList.add("next-button");
        nextButton.addEventListener("click", () => {
            currentQuestion = questions[currentQuestion].yes; //either is fine.
            displayQuestion();
        });

          const buttonContainer = document.createElement("div");
          buttonContainer.classList.add("button-container");
            buttonContainer.appendChild(nextButton)
          questionContainer.appendChild(buttonContainer);
      }
  else { // Result
      //show final answer
        const resultText = document.createElement("div");
        resultText.classList.add("result-text");
    resultText.textContent = questions[currentQuestion].text;
     questionContainer.appendChild(resultText);
    }
}


function restart() {
  currentQuestion = "start";
  displayQuestion();
}


// Initialize
document.addEventListener("DOMContentLoaded", () => {
  displayQuestion();
    //add a restart
    const restartButton = document.getElementById("restart-button");
    restartButton.addEventListener("click", restart);
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GA4 Cross-Domain Strategy Decision Tree</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>GA4 Cross-Domain Strategy Decision Tree</h1>
        <div id="question-container">
            <!-- Questions and answers will be dynamically inserted here -->
        </div>
        <button id="restart-button">Restart</button>
    </div>
    <script src="app.js"></script>
</body>
</html>

style.css

/* style.css */
body {
    font-family: sans-serif;
    margin: 0; /* Reset default margin */
    padding: 0;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ensure container takes at least the full viewport height */
}

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 80%; /* Responsive width */
    max-width: 600px; /* Max width for larger screens */
  text-align: center;
}

h1 {
    color: #333;
    margin-bottom: 20px;
}

#question-container {
    margin-bottom: 20px;
}


.question-text {
    font-size: 1.1em;
    margin-bottom: 15px;
    line-height: 1.4;
}

.button-container{
    display:flex;
    justify-content: center;
    gap: 15px;
}

.answer-button, #restart-button,.next-button  {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}
.answer-button:hover, #restart-button:hover, .next-button:hover {
    background-color: #0056b3;
}

#restart-button{
    margin-top: 30px;
}
.result-text {
    font-size: 1.2em;
    font-weight: bold;
    color: #28a745; /* Green color for results */
    margin-top: 15px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        width: 95%; /* More width on smaller screens */
        padding: 20px;
    }

    .button-container{
        flex-direction: column;
    }
}