replace landing page example with Question 8

index.html

@@ -31,7 +31,7 @@ <h1>Welcome to Praxly 🍂</h1>
     </div>
 
     <iframe
-      src="/embed.html?button=both&result=both#code=%2F%2F%20Function%20to%20calculate%20change%0Avoid%20calculateChange(int%20paidAmount%2C%20int%20itemCost)%0A%20%20%20%20int%20change%20%E2%86%90%20paidAmount%20-%20itemCost%0A%20%20%20%20int%20cents%20%E2%86%90%20change%0A%0A%20%20%20%20int%20quarters%20%E2%86%90%20cents%20%2F%2025%0A%20%20%20%20cents%20%E2%86%90%20cents%20%25%2025%0A%20%20%20%20int%20dimes%20%E2%86%90%20cents%20%2F%2010%0A%20%20%20%20cents%20%E2%86%90%20cents%20%25%2010%0A%20%20%20%20int%20nickels%20%E2%86%90%20cents%20%2F%205%0A%20%20%20%20int%20pennies%20%E2%86%90%20cents%20%25%205%0A%0A%20%20%20%20%2F%2F%20Print%20change%20breakdown%0A%20%20%20%20print%20%22Change%20to%20be%20given%3A%22%0A%20%20%20%20print%20%22Quarters%3A%20%22%20%2B%20quarters%0A%20%20%20%20print%20%22Dimes%3A%20%22%20%2B%20dimes%0A%20%20%20%20print%20%22Nickels%3A%20%22%20%2B%20nickels%0A%20%20%20%20print%20%22Pennies%3A%20%22%20%2B%20pennies%0Aend%20calculateChange%0A%0A%2F%2F%20Main%20function%0Avoid%20main()%0A%20%20%20%20int%20itemCost%20%E2%86%90%201789%0A%20%20%20%20int%20paidAmount%20%E2%86%90%202000%0A%0A%20%20%20%20%2F%2F%20Check%20if%20paid%20amount%20is%20sufficient%0A%20%20%20%20if%20(paidAmount%20%3C%20itemCost)%0A%20%20%20%20%20%20%20%20print%20%22Insufficient%20amount%20paid.%22%0A%20%20%20%20else%0A%20%20%20%20%20%20%20%20%2F%2F%20Calculate%20and%20print%20change%0A%20%20%20%20%20%20%20%20calculateChange(paidAmount%2C%20itemCost)%0A%20%20%20%20end%20if%0Aend%20main%0A%0A%2F%2F%20Run%20the%20main%20function%0Amain()%0A"
+      src="/embed.html?button=both&result=both#code=%2F%2F%20Sample%20Question%208%0A%0Avoid%20swap(int%5B%5D%20arr%2C%20int%20i%2C%20int%20j)%0A%20%20%20%20int%20temp%20←%20arr%5Bi%5D%0A%20%20%20%20arr%5Bi%5D%20←%20arr%5Bj%5D%0A%20%20%20%20arr%5Bj%5D%20←%20temp%0Aend%20swap%0A%0Avoid%20sort(int%5B%5D%20arr%2C%20int%20len)%0A%20%20%20%20int%20pos%20←%200%0A%20%20%20%20while%20(pos%20<%20len)%0A%20%20%20%20%20%20%20%20if%20(pos%20%3D%3D%200)%0A%20%20%20%20%20%20%20%20%20%20%20%20pos%20←%20pos%20%2B%201%0A%20%20%20%20%20%20%20%20else%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(arr%5Bpos%5D%20>%20arr%5Bpos%20-%201%5D)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20pos%20←%20pos%20%2B%201%0A%20%20%20%20%20%20%20%20%20%20%20%20else%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20swap(arr%2C%20pos%2C%20pos%20-%201)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20pos%20←%20pos%20-%201%0A%20%20%20%20%20%20%20%20%20%20%20%20end%20if%0A%20%20%20%20%20%20%20%20end%20if%0A%20%20%20%20end%20while%0Aend%20sort%0A%0Aint%5B%5D%20numbers%20←%20%7B2%2C%201%2C%205%2C%203%2C%204%7D%0Asort(numbers%2C%205)%0A"
       width="100%" height="600" allow="fullscreen" frameborder="0">
     </iframe>
 

public/themes.css

@@ -508,7 +508,7 @@ h1 {
 
 main {
   display: flex;
-  flex-basis: 15%;
+  flex-basis: 20%;
   flex-grow: 1;
   background-color: var(--output-bg-color);
 }

src/debugger.js

@@ -74,8 +74,15 @@ export async function generateVariableTable(environment, level) {
             const typeCell = document.createElement("td");
             typeCell.textContent = value.realType;
 
-            let valueEvaluated = await value.evaluate(environment);
-            valueCell.textContent = valueEvaluated.value;
+            if (!value.realType.endsWith(']')) {
+                let valueEvaluated = await value.evaluate(environment);
+                valueCell.textContent = valueEvaluated.value;
+            } else {
+                let evaluated = await Promise.all(value.elements.map(async obj => await obj.evaluate()));
+                let results = evaluated.map(obj => obj.value);
+                valueCell.textContent = "{" + results.join(', ') + "}";
+            }
+
             const locationCell = document.createElement("td");
             locationCell.textContent = environment.name;
             newRow.appendChild(attributeCell);