Elements

Elements are the powerful building blocks of an App. They include the logic and back-end aggregation that handles quizzes, polls and other types of two-way data exchanges.
Let's imagine that your App uses the Quiz to show questions to users. Let's see how we can receive element and watch for when that element changes.
1
// assume LViS Event exists and is set as active
2
​
3
var event = LViS.getEvent(); 
4
​
5
var quiz;
6
​
7
var handleState = function (state) {
8
  // Do something when you receive a new Element
9
};
10
​
11
// Triggered when a new Element is triggered
12
event.on(LViS.Event.ON_ELEMENT_PUBLISH, function (element) {
13
  switch (element.getContentType()) {
14
    case LViS.Quiz.TYPE:
15
      quiz = element;
16
​
17
      // Listen to the quiz Element's state change
18
      quiz.bind(LViS.Quiz.ON_STATE_CHANGE, handleState);
19
​
20
      // Force handling of the quiz's current state
21
      handleState(quiz.getState());
22
    break;
23
  }
24
});
Copied!
With this in place we now have a handy way of triggering the UI to show questions starting, closing and ending.
Finally let's look at what to do with the Quiz element, how to get the question and answer options and then how to reveal the correct answer.
Firstly lets modify the handleState to call a function that handles rendering, for various Quiz states
1
var handleState = function (state) {
2
  switch (state) {
3
    case LViS.Quiz.STATE_STARTED:
4
      // Show options
5
      renderQuiz();
6
    break;
7
    case LViS.Quiz.STATE_STOPPED:
8
      // Stop collecting answers and disable controls
9
      stopQuiz();
10
    break;
11
    case LViS.Quiz.STATE_REVEALED:
12
      // Show results
13
      revealQuiz();
14
    break;
15
  }
16
};
17
 
18
var renderQuiz = function () {};
19
var stopQuiz = function () {};
20
var revealQuiz = function () {};
Copied!
Now let's take each of those render functions in turn. First let's look at rendering the question. We can quickly get everything we need to display that question.
1
var renderQuiz = function () {
2
  var question  = quiz.getQuestion();
3
  var options   = quiz.getOptions();
4
  var remaining = quiz.getDurationLeft();
5
​
6
  // Then use those variables to update your UI, i.e:
7
  //   * display Question Text;
8
  //   * create buttons for each answer options
9
  //   * make sure buttons call quiz.vote();
10
  //   * add countdown
11
};
Copied!
When the Quiz Element ends, you might want to then disable the buttons to stop accepting button presses.
1
var stopQuiz = function () {
2
    // Disable any option buttons
3
    // Change state of countdown
4
};
Copied!
It's when the answer is revealed that you'll usually do something significant, like figuring out if the user got the question right. Studio has convenience methods to help with this.
1
var revealQuiz = function () {
2
  if (quiz.hasUserVoted()) {
3
    if (quiz.getCorrectOption() === quiz.getUserVote()) {
4
      // User was correct
5
    } else {
6
      // User was wrong
7
    }
8
  } else {
9
    // User didn't vote
10
  }
11
​
12
  // Update UI accordingly
13
};
Copied!

Add Demographics Counter

Get Element Publish Time

Last modified 4mo ago

Copy link