The smokescreen pages

The smokescreen pages are designed to immerse participants more into the virtual country and to reduce demand effects by distracting participants from the main purpose of the questionnaire. They are presented as everyday situations that participants might encounter in Novaland. The smokescreens are displayed in the first and fifth rounds of the main app. The first smokescreen is displayed after the introduction to Novaland, while the second smokescreen is displayed after the second vignette.

The scenarios of the smokescreens contain arbitrary situations that are not directly related to the main purpose of the questionnaire. One smokescreen is about adopting a pet, while the other smokescreen is about visiting a restaurant. The order of these two scenarios was randomized for each participant.

Let’s have a detailed look into the code of the smokescreen pages - how they are created, how they are randomized and how they are displayed to the participants.

In the C section, the rounds in which the smokescreens are displayed are defined in SMOKESCREEN_ROUNDS = [1, 5]. The smokescreens are then defined in the smokescreens variable as a list of strings: smokescreens = ['pets', 'restaurant']. The first smokescreen is called “pets” and the second smokescreen is called “restaurant”. In the creating_session function, the order of the smokescreens is randomized for each participant. This is done by using the smokescreens object and then shuffling it using the random.shuffle() function. The randomized order is then stored in the Participant object as p.vars['smokescreen_order'].

The code for the smokescreen pages is implemented in the Smokescreen page class:

 1class Smokescreen(Page):
 2    form_model = 'player'
 3
 4    @staticmethod
 5    def is_displayed(player):
 6        return player.round_number in C.SMOKESCREEN_ROUNDS
 7
 8    def get_form_fields(player):
 9        return [player.current_scenario]
10
11    @staticmethod
12    def vars_for_template(player: Player):
13        return {
14            'smokescreen': f'main/smokescreens/{player.current_scenario}.html',
15            'smokescreen_header': C.scenario_headers[player.round_number - 1]

The is_displayed method is used to determine whether the page should be displayed to the participant. This is done by checking whether the current round number is in the list of smokescreen rounds defined in the C class.

The get_form_fields method is used to define the form fields that are displayed on the page. In this case, it returns the current scenario of the participant, which is stored in the current_scenario variable. This variable is set in the creating_session function and contains the name of the current smokescreen scenario for the participant. This dynamic variable function is used to ensure that the correct smokescreen scenario is displayed to the participant. It is required because there is only one HTML template for both smokescreens, which is dynamically filled with the content of the current smokescreen scenario.

The vars_for_template method is used to pass variables to the HTML template. In this case, it passes the path to the HTML template of the current smokescreen scenario and the header for the smokescreen page. This is used because the HTML template for the smokescreen pages is the same for both smokescreens and the content is dynamically filled with the current smokescreen scenario.

The path to the HTML template is constructed using the main/smokescreens/ folder and the name of the current scenario, as this folder contains the two HTML files (pets.html and restaurant.html) that define the text of the smokescreen pages. The header of the page is defined in the scenario_headers variable in the C class and contains the name of the day on which the smokescreen is displayed. This dynamic variable function is used to ensure that the correct header is displayed on the page, depending on the round number in which the smokescreen is displayed. It contains the number of the day in Novaland and the current day of the week.

The participants were asked to answer a question about the smokescreen scenario - either to adopt a pet or to choose the restaurant they want to visit. Again, we used a dynamic variable function to ensure that the correct question is displayed to the participant. The question object were defined in the Player model as pets and restaurant, respectively. The question is then displayed in the HTML template using the {{ formfields }} variable, which is defined in the get_form_fields method of the Smokescreen page class.

With this setup, we ensure that the smokescreen pages are displayed correctly to the participants - at the correct time, and with the correct content according to the randomized order of the smokescreens.

The Outcome Page

After the participants submitted the smokescreen page, they were redirected to the EndOfDay page. This page is used to inform participants about the outcome of the smokescreen scenario they just experienced. They are dynamically filled with the content of the current scenario and adjusted to the decision that participants made in that scenario. They were not only used after the smokescreen pages, but also after the vignette pages. They were implemented to increase participants’ immersion and feeling of self-efficacy.

The code for the EndOfDay HTML template looks like this:

 1<div class="content-box">
 2    <h1>{{ vignette_header }}. Tag {{ player.round_number }} von {{ C.NUM_DAYS }}</h1>
 3    {{ if img_desc}}
 4        <div class="text-center lead m-3 border-1">
 5            <img class="img-fluid img-thumbnail" src="{{static path_to_image}}" alt=" {{img_desc}}" width="300">
 6        </div>
 7    {{ endif }}
 8    <div class="text-image-container">
 9
10
11        <div class="text-content">
12            {{ include end_of_day_text }}
13        </div>
14    </div>
15    <button>Weiter</button>
16</div>

Here, the vignette_header variable is used to display the header of the page, which is defined in the C class. The img_desc variable contains the file name of the .jpg file corresponding to the current scenario. The file path to the image is constructed using the path_to_image variable. These variables are defined using the following code in the vars_for_template method of the EndOfDay page class:

1img_desc = f'{player.current_scenario}_{answer}'
2path_to_image = f'images/smokescreens/{img_desc}.jpg'
3
4# and then:
5return {
6    'img_desc': img_desc,
7    'path_to_image': path_to_image
8}

The text of the page is dynamically added using the include statement, which includes the content of the corresponding HTML file for the current scenario. The content of the HTML file is defined in the end_of_day_text variable, which is also defined in the vars_for_template method of the EndOfDay page class and contains the path to the HTML file for the current scenario:

1return {
2    'end_of_day_text': f'main/outcomes/{player.current_scenario}.html'
3}

The HTML files for the EndOfDay page are located in the main/outcomes/ folder and are named according to the current scenario (e.g., pets.html and restaurant.html). In these HTML files, conditional statements are used to display the correct content depending on the decision that participants made in the smokescreen scenario. For example, if participants decided to adopt a pet, they would see a text that describes the outcome of their decision and how it affects their life in Novaland.

These pages are also used to display the outcome of the vignette scenarios. The functionality is the same as for the smokescreen pages, but the content of the HTML files is slightly more complex: The conditional statements that are used to display the content of this page depend not only on the decision that participants made in the vignette scenario, but also on the outcome of the vignette itself. For example, if participants encountered the corruption vignette and decided to report the corruption, they would see a text that describes the service quality received and the consequences of their decision.