Develop Reference

otree: ask a question depending on the answer to a previous question (on the same page)

I would like to incorporate a question in Otree that might or might not be asked depending on a previous question. Here is a very simple example:
Question 1: What is your main occupation:
A. Work.
B. Student.
C. Unemployed
Question 2 (ONLY ASKED IF the answer to "Question 1" is "A. Work"): what industry do you work on?
A. Transportation
B. Mining
C. Other
I have managed to do this when Question 1 and Question 2 are on different pages (see code below). However, I would like to have questions 1 and 2 on the same page. Any insights on how I can do this? (I am a beginner using otree/javascript)
from otree.api import *
doc = """
'other' option
"""
class C(BaseConstants):
NAME_IN_URL = 'option_other'
PLAYERS_PER_GROUP = None
NUM_ROUNDS = 1
class Subsession(BaseSubsession):
pass
class Group(BaseGroup):
pass
class Player(BasePlayer):
occupation = models.StringField(label='main occupation?',choices=['Work', 'Student', 'Unemployment'])
industry = models.StringField(label='what industry do you work on?', choices=['transportation','mining','others'])
# PAGES
class MyPage(Page):
form_model = 'player'
form_fields = ['occupation']
class MyPage2(Page):
#staticmethod
def is_displayed(player: Player):
return player.occupation == 'Work'
form_model = 'player'
form_fields = ['industry']
page_sequence = [MyPage, MyPage2]

To show a question depending on the answer to another question on the same page, you need a little javascript (as you might have guessed since your question is tagged accordingly). This javascript code can be integrated directly into the HTML template (Page.html), for example like this:
{{ block styles }}
<style>
.do-not-show {
display: none;
}
</style>
{{ endblock }}
{{ block content }}
{{ formfield "occupation" }}
<div id="industry-box" class="do-not-show">
{{ formfield "industry" }}
</div>
{{ next_button }}
{{ endblock }}
{{ block scripts }}
<script>
let industry_box = document.getElementById("industry-box");
let industry_select = document.getElementById("id_industry");
let occupation_select = document.getElementById("id_occupation");
occupation_select.addEventListener("change", function() {
if (occupation_select.value == "Work") {
industry_box.classList.remove("do-not-show");
industry_select.required = true;
} else {
industry_box.classList.add("do-not-show");
industry_select.required = false;
}
});
</script>
{{ endblock }}
To explain: First, let's hide the second question by wrapping it in a box and creating a CSS class that ensures that this box is not displayed. And then in the javascript block we create an event listener that reacts every time an answer is selected on the first question. If the answer is "Work", we'll display the second question by removing our CSS class. If the answer has a different value, we add our CSS class and hide the question (if it's not already hidden). If you want the second question to be optional (rather than mandatory), you can just remove this two lines: industry_select.required = true/false;.
It is also important that you add blank=True in the field for the second question in the player model. Otherwise, otree will always expect an answer to this question and throw an error message if the question isn't answered (because a player never saw it, for example):
class Player(BasePlayer):
occupation = models.StringField(
label='main occupation?',
choices=['Work', 'Student', 'Unemployment']
)
industry = models.StringField(
label='what industry do you work on?',
choices=['transportation','mining','others'],
blank=True
)
And of course both questions have to be included as form fields in the class of your page:
class MyPage(Page):
form_model = 'player'
form_fields = ['occupation', 'industry']

Need to convert js to vuejs [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 months ago.
Improve this question
<script type="text/javascript">
const btn = document.querySelector("#btn");
const btnText = document.querySelector("#btnText");
btn.onclick = () => {
btnText.innerHTML = "Thanks";
btn.classList.add("active");
};
</script>
I tried to change this content to vuejs 3. But iam unable to do and getting some error. Don't know how to convert this to Vue js

<template>
<button :class="{ active: clicked }" :onclick="clicked = true">
{{ clicked ? 'Thanks!' : 'Click me!' }}
</button>
</template>
<script setup>
import {ref} from 'vue'
const clicked = ref(false)
</script>

Conditionally rendering multiple components -- which style is more readable? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
Consider a web app page where there's table of data that I can edit if I have sufficient permissions. For this example, our editing is limited to selecting and deleting rows.
Which of the following two approaches for the render method of each table row is more readable?
render() {
let checkbox, deleteButton;
if (CAN_EDIT) {
checkbox = (
<checkbox-button-stuff
... this is an 8 line declaration
...
...
...
...
...
...
...
/>
);
deleteButton = (
<delete-button-stuff
... this is a 9 line declaration
...
...
...
...
...
...
...
/>
);
}
return (
<div>
{checkbox}
<other-table-stuff />
{deleteButton}
</div>
);
}
or
render() {
let checkbox = (
<checkbox-button-stuff
... this is a 9 line declaration
...
...
...
...
...
...
/>
);
let deleteButton = (
<delete-button-stuff
... this is an 9 line declaration
...
...
...
...
...
...
...
...
/>
);
if (!CAN_EDIT) {
checkbox = null;
deleteButton = null;
}
return (
<div>
{checkbox}
<other-table-stuff />
{deleteButton}
</div>
);
}
Note: the *-stuff names are used to represent nested divs + other components. Also, I say that the buttons are an "X line declaration" because this is based on actual code review from a PR that I made.
I'd argue that the latter keeps the logic of "should I render these?" in one place. The first example, however, avoids the negation (!CAN_EDIT) which IMO hurts readability.
Thanks for any input!

For inline if else test in React, you can use :
render() {
{
<div>
MY_CONDITION ?
<MyComponentToRenderIfTrue />
:
<MyOtherComponentToRenderIfFalse />
</div>
}
}
OR
render() {
{
<div>
MY_CONDITION && <MyComponentToRender />
</div>
}
}
In both, you can update your MY_CONDITION and React will re-render your component.
Hope this help.

Here's a third option:
return (
<div>
{ CAN_EDIT && <CheckboxButtonStuff /> }
<OtherTableStuff />
{ CAN_EDIT && <DeleteButtonStuff /> }
</div>
);
Also your components should be capitalized and preferably camel cased- https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components

Getting div data which has empty spaces in its class field [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have a page that I need to parse which is :
<div class="shadowBox someOtherBox">
.
.
.
</div>
.
.
.
<div class="shadowBox other">
<h2>OTHERS</h2>
<ul>
<li>
TITLE #1
</li>
<li>
TITLE #2
</li>
<li>
TITLE #3
</li>
</ul>
</div>
I would like to get each link inside <div class="shadowBox other"> and its TITLE. I tried to do this in many different ways, but at the end I couldn't managed to do it. Here is the code for one of my tries;
function parse(crn)
{
request("LINK_OF_PAGE", function(error, response, html)
{
if(!error)
{
var $ = cheerio.load(html);
var title, news_url, url_hash;
var json = { title : "", news_url : ""};
var links = [];
var data = $('div').filter('.shadowBox').last();
//var data = $('.shadowBox.other').children('ul').children('li').children('a');
console.log(data);
news_url = data.prev().text();
url_hash = md5(news_url);
}
});
}
Why my logic doesn't work? How would I achieve what I want?

Looks like you are trying to populate the links array with the href and text value of anchor elemnets then
var links = $('.shadowBox.other li a').map(function(){
var $this = $(this);
return { title : $this.attr('href'), news_url : $this.text()}
}).get();

How to foreach inside script tag in ASP.NET MVC [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
This is my code for my calendar :
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
editable: false,
events: [{
#foreach (var item in Model) {
title : #Html.DisplayFor(modelItem => item.EventName),
start : #Html.DisplayFor(modelItem => item.StartDate),
end : #Html.DisplayFor(modelItem => item.EndDate)
}
}]
});
});
</script>
}
I have some trouble inside the foreach, the #Html.DisplayFor(modelItem => item.EventName), #Html.DisplayFor(modelItem => item.StartDate), and #Html.DisplayFor(modelItem => item.EndDate) are underlined red, so I don't know what do I have to change or fix.
Thankyou.

#Html.Raw should work for you in this scenario.
$(document).ready(function () {
$('#calendar').fullCalendar({
editable: false,
events: [{
#foreach (var item in Model) {
#Html.Raw("title :"+item.EventName+",start :"+ item.StartDate+",end :"+ item.EndDate);
}
}]
});
});

Since you probably want a JSON object per array item, you'll need to emit a pair of {} braces for each item. I've done this below with outer braces plus string.Join to emit the inner ones. This will only work correctly if you have at least one item in the list. Hopefully all my braces are matching up. Beware with using Html.Raw that if users specify things like "EventName" they could embed malicious javascript, so you should take appropriate precautions to clean/encode those values if so.
events:
[
#(Html.Raw("{"
+ string.Join("},{",
Model.Select(m=> "title:\"" + m.EventName + "\",start:\"" + item.StartDate + "\",end:\"" + item.EndDate + "\"" ))
+ "}" )
)
]
Use your browser to inspect the generated HTML to see if you got the javascript you expected.