Combining Versus with Digital Content Components
From Versum to DCCs
Versum sentence:
~ temperature:=25+5
Value of temperature: ^temperature^
The equivalent using Versum DCCs maintaining aspects of the original syntax:
[~][["temperature:=25+5";autorun]]
Value of temperature: [^][["temperature";active]]
[compute][[expression:"temperature:=25+5";autorun]]
Value of temperature: [expression][[expression:"temperature";active]]
[~][[
temperature:=25+5
* autorun
]]
Value of temperature: [^][[
temperature
* active
]]
<dcc-compute expression="temperature:=25+5" autorun></dcc-compute>
Value of temperature: <dcc-expression expression="temperature" active></dcc-expression>
~ p:=10
<p>Value of P: ^p^</p>
[~|plus10][["p:=p+10"]]
[*|add-button][["Add 10"]]
[add-button] =click|update=> [plus10]
[~][["p:=10";autorun]]
<p>Value of P: [^][["p";active]]</p>
[~|plus10][["p:=p+10"]]
[*|add-button][["Add 10"]]
[add-button] =click|update=> [plus10]
[~][[
* autorun
p:=10
]]
<p>Value of P: [^][[
* active
p
]]</p>
[~|plus10][[
p:=p+10
]]
[*|add-button][[
Plus 10
]]
[add-button] =click|update=> [plus10]
<dcc-compute id="dcc1" autorun expression="p:=10"></dcc-compute>
<p>Value of P: <dcc-expression id="dcc4" active expression="p"></dcc-expression></p>
<dcc-compute id="plus10" expression="p:=p+10"></dcc-compute>
<dcc-button id="add-button" label="Add 10"></dcc-button>
<connect-dcc from="add-button" trigger="click" to="plus10" topic="update"></connect-dcc>
~ p:=10
~ half:=p/2
~ double:=p*2
<p>Value of P: ^p^</p>
<p>Value of Half: ^half^</p>
<p>Value of Double: ^double^</p>
[~|plus10][[
p:=p+10
half:=p/2
double:=p*2
]]
[*|add-button][["Add 10"]]
[add-button] =click|update=> [plus10]
~ total:=0
Escolha a quantidade:
[slider][[
* variable: quantidade
* index
]]
[*|vender][["Vender"]]
[~|total][[
total:=10*quantidade
]]
Total: ^total^
[vender] =click|update=> [total]
[input-typed|dccinput][[
Fale <b>TUDO</b> que você sabe sobre doença pulmonar obstrutiva crônica. <b>TODAS</b> as informações que você souber são importantes.
* variable: Presentation.hypothesis
* rows: 25
]]
[markdown|faltam][[
<span style="background-color:blue;color:white">Faltam 30 segundos</span>
* display: none
]]
[markdown|esgotado][[
<span style="background-color:purple;color:white">Tempo esgotado</span>
* display: none
]]
[timer|clockf][[
* autostart
* interval: 1000
* cycles: 270
]]
[timer|clocke][[
* autostart
* interval: 1000
* cycles: 300
]]
[clockf] =end|style/display/initial=> [faltam]
[clocke] =end|style/display/none=> [faltam]
[clocke] =end|style/display/initial=> [esgotado]
[clocke] =end|readonly/true=> [dccinput]
# Presentation
The temperature is ^temperature^.
<form>
<p>temperature: <input id="temperature"></p>
<dcc-submit label="Set Temperature" topic="var/*/set"></dcc-submit>
</form>
# Presentation
<form>
<p>temperature: <input id="temperature"></p>
What is your evaluation: <select name="evaluation" id="evaluation">
<option value="low">Too low</option>
<option value="regular">Regular</option>
<option value="high">Too high</option>
</select>
<dcc-submit label="Set Temperature" topic="var/*/set"></dcc-submit>
</form>
The temperature is ^temperature^.
Your evaluation ^evaluation^.
<dcc-compute expression="temperature:=25+5" autorun></dcc-compute>
<dcc-dhtml autoupdate>
Temperature:
<end-dcc></end-dcc>
</dcc-dhtml>
<form>
<p>temperature: <input id="temperature"></p>
<dcc-submit label="Set Temperature" topic="var/*/set"></dcc-submit>
</form>
<dcc-dhtml autoupdate>
Temperature: .
<end-dcc></end-dcc>
</dcc-dhtml>
<form>
<p>temperature: <input id="temperature"></p>
What is your evaluation: <select name="evaluation" id="evaluation">
<option value="blue">Too low</option>
<option value="green">Regular</option>
<option value="red">Too high</option>
</select>
<dcc-submit label="Set Temperature" topic="var/*/set"></dcc-submit>
</form>
<dcc-dhtml autoupdate>
<spam style="color:">Temperature: .</spam>
<end-dcc></end-dcc>
</dcc-dhtml>
# Presentation
<form>
<p>temperature: <input id="temperature"></p>
<dcc-submit label="Set Temperature" topic="var/*/set"></dcc-submit>
</form>
<dcc-dhtml autoupdate>
<dcc-slider min="0" max="100" value="" variable="temp" index></dcc-slider>
<end-dcc></end-dcc>
</dcc-dhtml>
# Knot 1
<form>
<p>temperature: <input id="temperature"></p>
<dcc-submit label="Set Temperature" topic="var/*/set"></dcc-submit>
</form>
* Go Next -> Knot 2
# Knot 2
<dcc-dhtml autoupdate>
Temperature: .
<end-dcc></end-dcc>
</dcc-dhtml>
# Knot 1
Temperature:
? temperature
* Go Next -> Knot 2
# Knot 2
<dcc-dhtml autoupdate>
Temperature: .
<end-dcc></end-dcc>
</dcc-dhtml>
Escolha a quantidade:
[slider][[
* variable: quantity
* index
]]
[*|vender][[
* topic: timer/start
Vender
]]
[space-cellular-editor | cellular-space][[
* rows: 14
* cols: 20
* cell-width: 32
* cell-height: 32
* background-color: #ebeba2
* grid
wwwwwwwwwwwwwwwwwwww
wwwwwwwwwwwwwwwwwwww
22222222222222222222
.u.......u..........
....................
...u...u............
...u................
...............u....
........i......u....
....................
...u.........u......
..............u.....
........u...........
....................
]]
=type/#=> [cellular-space]
=state/next|next=> [cellular-space]
[cell-image][[
* type: .
* label: sand
* image: https://mc-unicamp.github.io/oficinas/simula/business/image/cell-yellow-green-black.png
]]
[cell-image][[
* type: i
* label: icecream
* image: https://mc-unicamp.github.io/oficinas/simula/business/image/icecream-cart-green.png
]]
[cell-image][[
* type: u
* label: umbrella
* image: https://mc-unicamp.github.io/oficinas/simula/business/image/beach-umbrella.png
]]
[cell-image][[
* type: 2
* label: waves2
* image: https://mc-unicamp.github.io/oficinas/simula/business/image/waves_espuma2.png
]]
[cell-image][[
* type: w
* label: waves
* image: https://mc-unicamp.github.io/oficinas/simula/contagion/harena/scripts/playground/images/cell/waves.svg
]]
[rule-dcc-cell-pair][[
* label: icecream moves
* probability: 100
* transition: i.>.i
***
*_*
***
]]
[rule-dcc-cell-pair][[
* label: icecream sold
* probability: 80
* transition: ui>ui
* topic: icecream/sold
_*_
*_*
_*_
]]
[~|sold-reset][[
* autorun
sold:=0
]]
[~|sold-increment][[
sold:=sold+1
]]
=icecream/sold|update=> [sold-increment]
[~][[
* condition: sold>=quantity
* dependency: sold-reset
* active
stop:=1
]]
Quantidade Vendida: ^sold^
[timer|clock][[
* cycles: 100000
* interval: 125
* topic: state/next
]]
=timer/start|start=> [clock]
=timer/stop|stop=> [clock]
=var/set/stop|stop=> [clock]
[table-csv][[schema]]
[table|tbl1][[]]
=table/updated|update=>[tbl1]
[table-csv][[schema]]
[chart|cht1][[]]
=table/updated|update=>[cht1]
[table-csv][[schema]]
[projection|prj1][[
* fields: height,weight
]]
=table/updated|update=>[prj1]
[chart|cht1][[]]
=table/projected|update=>[cht1]