<!DOCTYPE html>
<html>
<head>
  <title>My Game Profile</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: aliceblue;
      text-align: center;
      padding: 30px;
    }
    h1 { color: navy; }
    button {
      background: navy;
      color: white;
      padding: 10px 25px;
      border: none;
      border-radius: 20px;
      cursor: pointer;
    }
    div {
      border: 1px solid navy;
      width: 280px;
      margin: 6px auto;
      padding: 8px 12px;
      text-align: left;
      border-radius: 6px;
    }
  </style>
</head>
<body>

  <h1>My Game Profile</h1>
  <button onclick="showProfile()">Show Profile</button>

  <div>Name: <span id="name"></span></div>
  <div>Score: <span id="score"></span></div>
  <div>Top Score: <span id="record"></span></div>
  <div>Rank: <span id="rank"></span></div>
  <div>Greeting: <span id="greeting"></span></div>
  <div>Stars: <span id="stars"></span></div>
  <div>Bonus Level: <span id="bonus"></span></div>
  <div>Team Name: <span id="team"></span></div>

  <script>


      // String Concatenation — Show on Page
      document.getElementById("name").innerHTML     = name;
      document.getElementById("score").innerHTML    = myScore + " out of " + highScore;
      document.getElementById("record").innerHTML   = isTopScore;
      document.getElementById("rank").innerHTML     = rank;
      document.getElementById("greeting").innerHTML = greeting;
      document.getElementById("stars").innerHTML    = stars;
      document.getElementById("bonus").innerHTML    = bonus;
      document.getElementById("team").innerHTML     = team;

    }

  </script>
</body>
</html>