Ingress IQ - Shared AR Trivia Experience

Ingress IQ Cover Image
Choose your faction
Trivia Questions to play with other members
See your final score!

Inspiration

As college students, we’re extremely familiar with trivia / quiz platforms like Kahoot, which at times can be super fun and competitive, and we wanted to bring that experience to the Ingress Prime mission. We believe that combining a trivia experience with Ingress Prime can not only help agents learn more about the game and its lore but also foster a stronger sense of belonging and camaraderie within their factions. Furthermore, we took inspiration from popular trivia-based game shows like Jeopardy. We wanted to bring elements of problem-solving, teamwork, and exploration to the world of Ingress, enhancing its gameplay and making it even more engaging for agents of all levels.

What it does

Ingress IQ is a Shared AR Trivia Experience that enables agents from the Enlightened and Resistance faction to compete by answering trivia questions about Ingress Prime correctly, and most importantly, quickly. Agents win points for their team, so the more agents you have show up to trivia and the more accurately they answer the questions, the more points their faction wins!

How we built it

We started with the Shared AR Lobby template, and then added a networked to display trivia questions to all users

<template id="plane-template">
      <a-plane
        class="cantap"
        position="0 2 -5"
        rotation="0 0 0"
        width="2"
        height="2"
        color="#FFFFFF"
        material="
        color: #b4edd3; shader: flat; 
        src: https://static.8thwall.app/assets/ingressbg-czk8ct6647.jpeg"></a-plane>
    </template>

We then added networked components to display the questions and options, as well as extra details about the game(such as a leaderboard, showing which team was winning)

const questionText = document.createElement('a-text')
 questionText.setAttribute('value', question.question)
 questionText.setAttribute('color', 'white')
 questionText.setAttribute('position', '-3 2 0')
 questionText.setAttribute('scale', '1.5 1.5 1.5')  // the scale attribute increases size of text

Then, we added a HUD for users to choose their faction, which then changes their player object to an Ingress IP asset

<div
    xrextras-hud
    id="faction-selection"
    style="
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      font-family: sans-serif;
    ">
    <h1 style="color: white; margin-bottom: 20px">Select your Faction</h1>
    <div style="display: flex; width: 100%; height: 80%">
      <div
        id="enlightened"
        class="cantap"
        style="
          width: 50%;
          height: 100%;
          background-color: transparent;
          display: flex;
          align-items: center;
          justify-content: center;
        ">
        <img
          src="https://static.8thwall.app/assets/ING_Enlightened_logo-h9jbt7i5t9.png"
          alt="Enlightened"
          style="width: 50%; display: flex; height: auto" />
      </div>
      <div
        id="resistance"
        class="cantap"
        style="
          width: 50%;
          height: 100%;
          background-color: transparent;
          display: flex;
          align-items: center;
          justify-content: center;
        ">
        <img
          src="https://static.8thwall.app/assets/ING_Resistance_logo-hqybtloae9.png"
          alt="Resistance"
          style="width: 50%; display: flex; height: auto" />
      </div>
    </div>
  </div>

We then used the Room Store as described in the Shared AR x Ingress Challenge Resource Guide to create a room-connected key-value pair database, where we stored each agent’s responses and to back the game state.

const roomStore = NAF.connection.adapter.store;
let gameState = {};
let agentResponses = {};

// Function to set game state
const setGameState = (newState) => {
  gameState = newState;
  updateRoomStore();
};

// Function to set agent response
const setAgentResponse = (agentId, response) => {
  agentResponses[agentId] = response;
  updateRoomStore();
};

We continued adding features, like game state backing for the leaderboard, improved agent spawning positions, and animations for correct vs incorrect answers chosen, and we learned so much along the way.

After landing all of our changes and clicking publish, Ingress IQ, a Shared AR Experience is now live for everyone to play!

Challenges we ran into

We noticed that there was a dev token requirement across devices which made it hard to test and collaborate on certain browsers(namely Safari), so we came up with an alternate(albeit hacky) way to test the experience on multiple devices.
We had some difficulty passing parameters through our AFrame entities to our javascript functions, which we solved by using a javascript centric data model, where most of the data was defined in the javascript versus an AFrame entity schema.
We also had some challenges getting the networked text to render on other devices, and we had to do some work to make sure the font size property was tracked across all devices.

Accomplishments that we're proud of

Worked through complicated bugs and errors with limited A-Frame development experience Built a complex networked A-Frame experience with support for many simultaneous players

What we learned

We learned how to utilize Networked A-Frames and sync asset properties across multiple devices. We also learned how to structure an entertaining game such that it is exciting and learned about some of the strategies in recreating engaging environments like the ones created by a fun game of Kahoot.

What's next for Ingress IQ - Shared AR Trivia Experience

Next, we’d like to add support for user profiles so that users can track their performance over a certain time period and their faction can see how much they have contributed, earning more prestigious badges along the way. One way we would approach this is by utilizing the Niantic Player Data Module to store user data and harness Niantic authentication.