<div>
Du våkner opp. Etter du har spist frokost og gjort deg klart skal du dra på jobb. Du velger å...
</div>
<br /><br />
<span class="transportmiddel">[[Sykle->sykle]]</span><br />
<span class="transportmiddel">[[Gå->gå]]</span><br />
<span class="transportmiddel">[[Kjøre->kjøre]]</span><br />
<span class="transportmiddel">[[Ta trikken->kollektivt]]</span><br />
<span class="transportmiddel">[[Sparkesykkel->sparkesykkel]]</span>
<%
var _vars = window.setup.variables;
$(function() {
$('.transportmiddel').click(function() {
_vars.transportmiddel = this.innerText;
});
window.setup.showSidebar();
});
%>Du sykler til jobben. Det er en fin dag og sola skinner.
<br /><br />
[[Gå inn på jobben ->inngangen]]Du går til jobben. Det er en fin dag og sola skinner.
<br /><br />
[[Gå inn på jobben ->inngangen]]Du kjører til jobben. Det er en fin dag og sola skinner.
<br /><br />
[[Gå inn på jobben ->inngangen]]Du tar trikken til jobben. Det er en fin dag og sola skinner.
<br /><br />
[[Gå inn på jobben ->inngangen]]Du kjører sparkesykkel til jobben. Det er en fin dag og sola skinner.
<br /><br />
[[Gå inn på jobben ->inngangen]]<div class="avsnitt">
Du kommer inn på jobben. Det et åpent rom. Til venstre ser du et [[klesstativ->garderobe]]. Ved siden av klesstativet er det [[toaletter->toalett]].
</div>
<div class="avsnitt">
Rett fram ser du [[kjøkkenet]] med to store [[spisebord]] ved siden av. I hjørnet av rommet er det flere [[lenestoler]] og [[sofaer]], samt et lite [[stuebord]].
</div>
<br/><br/>
[[Gå videre inn ->gang-1]]<br/>
[[Gå ut fra jobb->ut]]
<div class="avsnitt">
Stativet har mange jakker på seg. Det må være flere på jobb.
</div>
<br/><br/>
[[tilbake->inngangen]]<div class="avsnitt">
Dette rommet er også stort og åpent. Til venstre ser du mange forskjellige [[arbeidsplasser->kontorlandskap]]. Du ser også forskjellige [[hyller og skap->lagringsplass]] ved siden av.
</div>
<div class="avsnitt">
Langs veggen til høyre ser du et [[lite kjøkken->minikjøkken]]. Der finnes det [[kaffemaskin]] og [[vanndispenser]]. Bortenfor kjøkkenet ser du en vegg med [[skap->låsskap]].
</div>
<br /><br />
[[Gå videre inn i kontoret ->gang-2]]<br/>
[[Gå tilbake->inngangen]]<div class="avsnitt">
Rommet er fylt med [[hyller->print-hylle]] og [[skap->print-skap]]. I hjørnet av rommet står en stor printer.
</div>
<br /><br />
[[tilbake->gang-2]]<div class="avsnitt">
Det åpene rommet går inn i en gang. Til høyre er et [[rom med en glassvegg->grupperom-1]]. Til venstre ser du en [[dør->cellekontor1]] og en [[dør->cellekontor-fler]] til lenger bort.
</div>
<div class="avsnitt">
Ved siden av deg er et [[rom->printer]] uten dør.
</div>
<br />
<br />
[[Gå tilbake til det åpne rommet ->gang-1]]<div class="avsnitt">
På kjøkkenet finner du en vanndispenser med og uten kullsyre. Det finnes også en kaffemaskin og vannkoker her. Kjøkkenbenken har en vask og fyller og skuffer under. Det er også noen skap over.
</div>
<div class="avsnitt">
Ved siden av kaffemaskinen står det to stykker å prater sammen.
</div>
<br/><br/>
[[tilbake->inngangen]]<div class="avsnitt">
Kontorlandskapet er stort og åpent med flere seksjoner. En gruppe sitter i en seksjon på 10 pulter, fem pulter på hver side vendt mot hverandre på [[en rekke->åpen-samarbeid]].
</div>
<div class="avsnitt">
En annen gruppe står og diskuterer rundt [[et bord->sosial-cafe]].
</div>
<div class="avsnitt">
En tredje gruppe sitter litt som den første men i [[båser->åpen-bås]]. med større skillevegger.
</div>
<br /><br />
[[Gå ut av kontorlandskapet ->gang-1]]<div class="avsnitt">
Rommet er stort og tomt. Det er et stort konferansebord og plass til 6 stykker rundt.
</div>
<%= window.story.render('add-task-to-place') %>
<br/><br/>
[[tilbake->gang-2]]<div class="avsnitt">
Her står pultene i en klassisk åpen kontorløsning. De er vendt mot hverandre og man kan enkelt se hverandre. Det er lett å prate med hverandre og det er lite skjerming.
</div>
<%= window.story.render('add-task-to-place') %>
<br /><br />
[[Gå tilbake til kontorlandskapet ->kontorlandskap]]<div class="avsnitt">
Bordet er i ståhøyde og det er barkrakker rundt. Dette er en aktiv møteplass for raske møter og diskusjoner.
</div>
<%= window.story.render('add-task-to-place') %>
<br /><br />
[[Gå tilbake til kontorlandskapet ->kontorlandskap]]<div class="avsnitt">
Disse pultene står i en klassisk åpen kontorlandskapsløsning. De har store skillevegger rundt seg som gjør de mer private og demper støy. Det er allikevel åpent og man kan snakke med naboen.
</div>
<%= window.story.render('add-task-to-place') %>
<br /><br />
[[Gå tilbake til kontorlandskapet ->kontorlandskap]]<div class="avsnitt">
Her er det noen skap du kan låse. Du har plass til pc og papirer.
</div>
<br/><br/>
[[tilbake->gang-1]]<div class="avsnitt">
Hyllene er åpne og det er en del bokser og papirer der. Det ligger også en teipdispenser og en stiftemaskin her.
</div>
<br/><br/>
[[tilbake->gang-1]]<div class="avsnitt">
Hylla har alt mulig av ark, stiftemaskiner, hullemaskiner og annet.
</div>
<br/><br/>
[[Lukk skapet->printer]]<div class="avsnitt">
I skapet finner du printerblekk og noen manualer. Det er også en del ark her.
</div>
<br/><br/>
[[Lukk skapet->printer]]<div class="avsnitt">
I rommet finner du en stor pult og en stol.
</div>
<%= window.story.render('add-task-to-place') %>
<br/><br/>
[[tilbake->gang-2]]<div class="avsnitt">
Dette kontoret har to separate pulter som også har hver sin bokhylle.
</div>
<%= window.story.render('add-task-to-place') %>
<br/><br/>
[[tilbake->gang-2]]<div class="avsnitt">
Toalettet er rent og ryddig. Det er ingen andre her.
</div>
<br/><br/>
[[tilbake->inngangen]]<div class="avsnitt">
Det lille kjøkkenet har en vannkoker og noen skap med kopper.
</div>
<br/><br/>
[[tilbake->gang-1]]<div class="avsnitt">
Det sitter to andre og småprater og drikker kaffe her. Du har god plass.
</div>
<%= window.story.render('add-task-to-place') %>
<br/><br/>
[[tilbake->inngangen]]<div class="avsnitt">
Lenestolen er god og myk. Du har god utsikt til resten av rommet.
</div>
<%= window.story.render('add-task-to-place') %>
<br/><br/>
[[tilbake->inngangen]]<div class="avsnitt">
Sofaen er myk og du har en fin utsikt til resten av rommet.
</div>
<%= window.story.render('add-task-to-place') %>
<br/><br/>
[[tilbake->inngangen]]<div class="avsnitt">
På bordet ligger det noen magasiner og aviser.
</div>
<%= window.story.render('add-task-to-place') %>
<br/><br/>
[[tilbake->inngangen]]<%
var _valgteOppgaver = window.setup.valgteOppgaver;
var _arbeidsoppgavene = window.setup.arbeidsoppgavene;
var maxOppgaver = 3;
function getOppgaveName(object) {
for(var i = 0; i<Object.keys(_arbeidsoppgavene).length; i++) {
var oppgaven = _arbeidsoppgavene[Object.keys(_arbeidsoppgavene)[i]];
if(oppgaven.tag == object.name) {
return oppgaven;
break;
}
}
}
$(document).on('showpassage:after', function() {
$('input[type="checkbox"]').click(function(){
if($(this).prop("checked") == true){
let isInList = false;
for(var i = 0; i<_valgteOppgaver.length; i++) {
if(_valgteOppgaver[i].tag == this.name) {
isInList = true;
}
}
if (!isInList) {
_valgteOppgaver.push(getOppgaveName(this));
if(_valgteOppgaver.length >= maxOppgaver) {
$('input.task-element[type=checkbox]:not(:checked)').prop("disabled", true);
}
}
}else if($(this).prop("checked") == false){
for(var i = 0; i<_valgteOppgaver.length; i++) {
if(_valgteOppgaver[i].hasTag(this.name)) {
_valgteOppgaver.splice(i,1);
if(_valgteOppgaver.length < maxOppgaver) {
$('input.task-element[type=checkbox]:not(:checked)').prop("disabled", false);
}
}
}
}
});
});
%>
<h2>Velg <bold>3</bold> arbeidsoppgaver</h2>
<br/>
<%= window.story.render('arbeidsoppgavene') %>
<div class="navigation">
<a href="javascript:void(0)" id="neste" data-passage="Tutorial" class="right hidden">Gå videre</a>
</div>Hvor har du lyst til å dra?
[[Kafé->kafe]] <br>
[[Butikken->butikk]] <br>
[[Et annet kontor->møte hos andre]] <br>
[[Tilbake til jobben->inngangen]]<div class="avsnitt">
Kaféen er nesten full. Folk prater og koser seg. Det lukter kaffe.
</div>
<%= window.story.render('add-task-to-place') %>
<br/><br/>
[[tilbake->ut]]<div class="avsnitt">
Det er en del folk på butikken, men det er fortsatt god plass.
</div>
<%= window.story.render('add-task-to-place') %>
<br/><br/>
[[tilbake->ut]]<div class="avsnitt">
Du står i et annet kontor.
</div>
<%= window.story.render('add-task-to-place') %>
<br/><br/>
[[tilbake->ut]]<div class="avsnitt">
Kaffemaskinen har mange muligheter. Folk siser americano er den beste.
</div>
<br/><br/>
[[tilbake->gang-1]]<div class="avsnitt">
Vanndispenseren har både kullsyre og vanlig vann.
</div>
<br/><br/>
[[tilbake->gang-1]]
<%
var _vars = window.setup.variables;
var _valgteOppgaver = window.setup.valgteOppgaver;
%>
<div>
<h4>Arbeidsoppgavene du skal finne arbeidsplass til:</h4>
<ul class="sidebar-field-wrapper">
<%
for(var i = 0; i<_valgteOppgaver.length; i++) {
var field = '';
var checked = '';
if (_valgteOppgaver[i].place == '') {
field = _valgteOppgaver[i].name;
} else {
field = _valgteOppgaver[i].name+' på '+ _valgteOppgaver[i].place;
checked = 'checked';
}
print('<li><input type="checkbox" '+checked+' class="task-element sidebar-task" name="'+_valgteOppgaver[i].tag+'"><span class="sidebar-text">'+ field +'</span><span class="checkmark"></span></li>');
}
%>
</ul></div>
<div class="navigation">
<%
var fulldag = true;
for(var i=0; i<_valgteOppgaver.length; i++) {
if(_valgteOppgaver[i].place == "") {
fulldag = false;
}
}
if(fulldag && _vars.hasSetValues) {
print('<a href="javascript:void(0)" data-passage="hvorfor-valgt" id="sidebar-next">Jeg er fornøyd</a>');
} else if (fulldag) {
print('<a href="javascript:void(0)" data-passage="oversikt-dag" id="sidebar-next">Jeg er fornøyd</a>');
}
%>
</div><%
var _valgteOppgaver = window.setup.valgteOppgaver;
var _arbeidsdag = window.setup.arbeidsdag;
$(document).on('showpassage:after', function() {
$('.task-for-place').click(function(){
var oppgave = window.setup.functions.getOppgaveWithTag(this.id);
window.setup.checkSidebar(oppgave);
oppgave.place = passage.name;
window.setup.refreshSidebar();
});
});
%>
<div>
<span>Legg dette stedet til for</span>
<ul>
<%
for(var i=0; i<_valgteOppgaver.length; i++) {
print('<li><a href="javascript:void(0)" class="task-for-place" id="'+_valgteOppgaver[i].tag+'">'+_valgteOppgaver[i].name+'</a></li>');
}
%>
</ul>
</div><%
window.setup.hideSidebar();
_vars = window.setup.variables;
_valgteOppgaver = window.setup.valgteOppgaver;
$(document).on('showpassage:after', function() {
$('#back-story').click(function(){
window.setup.showSidebar();
});
});
// Check for values
function checkForVerdier() {
for(var i = 0; i<_valgteOppgaver.length; i++) {
if(_valgteOppgaver[i].verdier.length > 0) {
_vars.hasSetValues = true;
}
}
}
checkForVerdier();
%>
<h2>Dette er valgene du har gjort</h2>
<div><ul>
<%
var _valgteOppgaver = window.setup.valgteOppgaver;
for(var i = 0; i<_valgteOppgaver.length; i++) {
print('<li class="question-choice"><div class="question-inner-box"><img src="http://slyngstadli.no/herman/prosjekter/master/sm%C3%A5bilder/'+_valgteOppgaver[i].name+'.png"><span class="question-inner-title">'+_valgteOppgaver[i].name+' på '+ _valgteOppgaver[i].place +'</span></div></li>');
}
%>
</ul></div>
<div class="navigation">
<a href="javascript:void(0)" class="left" data-passage="<% print(_vars.currentPassage) %>" id="back-story">Jeg vil endre valgene mine</a>
<%
if(_vars.hasSetValues) {
print('<a href="javascript:void(0)" class="right" data-passage="hvorfor-valgt">Jeg er fonøyd</a>');
} else {
print('<a href="javascript:void(0)" class="right" data-passage="velg-verdier">Velg verdier</a>');
}
%>
</div><div>
<h2>Du skal nå finne hvor du vil jobbe med følgende arbeidsoppgaver</h2>
<ul>
<%
var _valgteOppgaver = window.setup.valgteOppgaver;
for(var i = 0; i<_valgteOppgaver.length; i++) {
print('<li class="question-choice"><div class="question-inner-box"><img src="http://slyngstadli.no/herman/prosjekter/master/sm%C3%A5bilder/'+_valgteOppgaver[i].name+'.png"><span class="question-inner-title">'+_valgteOppgaver[i].name+'</span></div></li>');
}
%>
</ul>
</div>
<div class="navigation">
<a href="javascript:void(0)" id="neste" data-passage="Intro" class="right">Gå videre</a>
</div>
<%
window.setup.hideSidebar();
var _valgteOppgaver = window.setup.valgteOppgaver;
var _functions = window.setup.functions;
var _vars = window.setup.variables;
var currentOppgave;
var currentVerdi = [];
var verdi = ['stille', 'skjermet', 'åpent', 'mulig samarbeid', 'utsikt', 'egen pult', 'sosialt', 'hyggelig', 'god plass'];
var arbeidsoppgaver = ['konstentrasjon', 'sende mails', 'møte', 'presentasjon']; //hente fra lista
$(document).on('showpassage:after', function() {
$('.verdi-box').click(function(){
var id = this.split('-selected');
$('#'+id[0]+'-selected').toggleClass('hidden');
$('#'+id[0]).toggleClass('hidden');
updateVerdier(id[0].replace('-', ' '));
});
$('#fornoyd-verdi').click(function() {
$('#oppgave-valg').removeClass('hidden');
$('#oppgave-fokus').addClass('hidden');
$('.selected-verdi').html('');
$('.unselected-verdi').html('');
updateOverview();
});
updateOverview();
$('#back-story').click(function(){
window.setup.showSidebar();
});
});
function oppgaveFokus(oppgave) {
$('#oppgave-valg').addClass('hidden');
$('#oppgave-fokus').removeClass('hidden');
$('#fokus-tittel').html(oppgave.name+' på '+oppgave.place);
}
function updateOverview() {
var result = '';
for(var i = 0; i<_valgteOppgaver.length; i++) {
var verdier = '';
for(var k = 0; k<_valgteOppgaver[i].verdier.length; k++) {
verdier += '<span class="verdi-box">'+_valgteOppgaver[i].verdier[k]+'</span>';
}
result += '<li class="question-choice" style="background:none"><div class="question-inner-box"><div class="question-choice-title">'+ _valgteOppgaver[i].name +' på '+ _valgteOppgaver[i].place+'</div><div class="question-choice-values">'+verdier+'</div><a href="javascript:void(0)" class="endre-valg" id="'+_valgteOppgaver[i].tag+'">Endre</a></div></li>';
}
$('.overview-wrapper').html(result);
$('.endre-valg').click(function(){
currentOppgave = _functions.getOppgaveWithTag(this.id);
oppgaveFokus(currentOppgave);
populateVerdier(currentOppgave);
});
}
function updateVerdier(verdi) {
var isInList = false;
for(var i = 0; i<currentOppgave.verdier.length;i++) {
if(currentOppgave.verdier[i] == verdi) {
currentOppgave.verdier.splice(i,1);
isInList = true;
}
}
if(!isInList) {
currentOppgave.verdier.push(verdi);
}
}
function populateVerdier(oppgave) {
var selectedVerdier = '';
var unselectedVerdier = '';
if(oppgave.verdier.length != 0) {
for(var k = 0; k < verdi.length; k++) {
var inList = false;
for(var i = 0; i < oppgave.verdier.length; i++) {
if(verdi[k] == oppgave.verdier[i]) {
inList = true;
}
}
if(inList) {
selectedVerdier += '<span class="verdi-box" id="'+verdi[k].replace(' ', '-')+'-selected">'+verdi[k]+'</span>';
unselectedVerdier += '<span class="verdi-box hidden" id="'+verdi[k].replace(' ', '-')+'">'+verdi[k]+'</span>';
console.log('selected');
} else {
selectedVerdier += '<span class="verdi-box hidden" id="'+verdi[k].replace(' ', '-')+'-selected">'+verdi[k]+'</span>';
unselectedVerdier += '<span class="verdi-box" id="'+verdi[k].replace(' ', '-')+'">'+verdi[k]+'</span>';
console.log('not selected');
}
}
} else {
for(var k = 0; k < verdi.length; k++) {
unselectedVerdier += '<span class="verdi-box" id="'+verdi[k].replace(' ', '-')+'">'+verdi[k]+'</span>';
selectedVerdier += '<span class="verdi-box hidden" id="'+verdi[k].replace(' ', '-')+'-selected">'+verdi[k]+'</span>';
}
}
$('.selected-verdi').html(selectedVerdier);
$('.unselected-verdi').html(unselectedVerdier);
$('.verdi-box').click(function(){
var id = this.id.split('-selected');
$('#'+id[0]+'-selected').toggleClass('hidden');
$('#'+id[0]).toggleClass('hidden');
updateVerdier(id[0].replace('-', ' '));
});
}
%>
<h2>Her er en oppsummering så langt:</h2>
<br/>
<div class="wrapper">
<div class="" id="oppgave-valg">
<div class="overview-wrapper">
</div>
<div class="navigation">
<a href="javascript:void(0)" class="left" id="back-story" data-passage="<% print(_vars.currentPassage);%>">Tilbake</a>
<a href="javascript:void(0)" class="right" data-passage="prioritere verdier">Jeg er fonøyd</a>
</div>
</div>
<div class="hidden" id="oppgave-fokus">
<h3>Hvorfor valgte du <span id="fokus-tittel"></span></h3>
<div class="choice-table">
<div class="selected-verdi">
</div>
<h5>Velg de av disse som passer:</h5>
<div class="unselected-verdi">
</div>
</div>
<div><a href="javascript:void(0)" id="fornoyd-verdi">Ferdig</a></div><div class="arbeidsoppgavene">
<%
var _arbeidsoppgavene = window.setup.arbeidsoppgavene;
for(var i = 0; i<Object.keys(_arbeidsoppgavene).length; i++) {
var oppgave = _arbeidsoppgavene[Object.keys(_arbeidsoppgavene)[i]];
print('<label><input type="checkbox" class="task-element" name="'+oppgave.tag+'"><div class="task-element-box"><img src="http://slyngstadli.no/herman/prosjekter/master/sm%C3%A5bilder/'+oppgave.name+'.png"><div class="task-element-title">' + oppgave.name.charAt(0).toUpperCase() + oppgave.name.slice(1)+'</div></div><!--<span class="checkmark"></span>--></label>');
}
%>
</div><h1>Arbeidsdagspillet</h1>
<p style="text-align:center;">I dette spillet skal du bli mer kjent med mulighetene for det nye kontoret. Spillet vil hjelpe oss å få et godt diskusjonsgrunnlag for å kunne bestemme hva dere trenger og for å bli bedre kjent med dere.</p>
<div class="navigation">
<a href="javascript:void(0)" id="neste" data-passage="om spillet" class="middle">Start spillet</a>
</div><h1>Om spillet:</h1>
<p style="text-align:center;">I starten av spillet må du velge tre arbeidsoppgaver du skal gjøre på en fiktiv dag og i hva slags rom du vil utføre dem. Deretter skal vi se litt nærmere på hvorfor du har valgt nettopp disse stedene.</p>
<div class="navigation">
<a href="javascript:void(0)" id="neste" data-passage="valg av oppgaver" class="middle">Gå videre</a>
</div><%
var _valgteOppgaver = window.setup.valgteOppgaver;
var sorterteVerdier = [];
var verdi = function(name, count){
this.name = name;
this.count = count;
};
$(document).on('showpassage:after', function() {
sorterteVerdier = getSorterteVerdier(_valgteOppgaver);
sorterteVerdier = sorterArrayEtterCount(sorterteVerdier);
console.log(sorterteVerdier);
printVerdier();
});
function printVerdier(){
var result = '';
for(var i = 0; i < sorterteVerdier.length; i++) {
result += '<li>'+sorterteVerdier[i].name+': '+sorterteVerdier[i].count+'</li>';
}
$('.section-info').html(result);
}
function getSorterteVerdier(samling) {
var verdieneSorterte = [];
for(var i = 0; i < _valgteOppgaver.length; i++) {
for(var k = 0; k < _valgteOppgaver[i].verdier.length; k++) {
var isInList = false;
for(var j = 0; j < verdieneSorterte.length; j++) {
if(_valgteOppgaver[i].verdier[k] == verdieneSorterte[j].name) {
isInList = true;
verdieneSorterte[j].count++;
}
}
if(!isInList){
verdieneSorterte.push(new verdi(_valgteOppgaver[i].verdier[k], 1));
}
}
}
return verdieneSorterte;
}
function sorterArrayEtterCount(array) {
return array.sort(function(a, b){return b.count - a.count});
}
function isInArray(entry, array) {
for(var i = 0; i < array.length; i++) {
if(array[i] == entry) {
return true;
}
}
return false;
}
%>
<h2>Dette er en oppsummering</h2>
<div class="wrapper">
<div class="evaluation-navigation">
</div>
<div class="section">
<h3 class="section-title"></h3>
<div class="section-info">
</div>
</div>
</div>
<%
var _valgteOppgaver = window.setup.valgteOppgaver;
var _functions = window.setup.functions;
var currentOppgave, currentIndex = 0;
var currentVerdi = [];
var verdi = ['stille', 'skjermet', 'åpent', 'mulig samarbeid', 'utsikt', 'egen pult', 'sosialt', 'hyggelig', 'god plass'];
var arbeidsoppgaver = ['konstentrasjon', 'sende mails', 'møte', 'presentasjon']; //hente fra lista
$(document).on('showpassage:after', function() {
$('.verdi-box').click(function(){
var id = this.split('-selected');
$('#'+id[0]+'-selected').toggleClass('hidden');
$('#'+id[0]).toggleClass('hidden');
updateVerdier(id[0].replace('-', ' '));
});
$('#fornoyd-verdi').click(function() {
$('#oppgave-valg').removeClass('hidden');
$('#oppgave-fokus').addClass('hidden');
$('.selected-verdi').html('');
$('.unselected-verdi').html('');
updateOverview();
});
currentOppgave = _valgteOppgaver[currentIndex];
oppgaveFokus(currentOppgave);
});
function nesteOppgave() {
if(!currentAtEdge(currentIndex)) {
currentIndex++;
}
currentOppgave = _valgteOppgaver[currentIndex];
oppgaveFokus(currentOppgave);
}
function currentAtEdge(currentIndex) {
return currentIndex >= _valgteOppgaver.length-1;
}
function oppgaveFokus(oppgave) {
$('#fokus-tittel').html(oppgave.name+' på '+oppgave.place);
populateVerdier(oppgave);
updateNavigation(currentIndex);
updateOverview();
}
function updateOverview() {
var result = '';
for(var i = 0; i<_valgteOppgaver.length; i++) {
var verdier = '';
for(var k = 0; k<_valgteOppgaver[i].verdier.length; k++) {
verdier += '<span class="verdi-box">'+_valgteOppgaver[i].verdier[k]+'</span>';
}
if(_valgteOppgaver[i] == currentIndex) {
result += '<li class="choice-nav" style="background:#434343; color:#fff" id="'+ _valgteOppgaver[i].tag +'"><div class="question-choice-title">'+ _valgteOppgaver[i].name +'</div></li>';
} else {
result += '<li class="choice-nav" id="'+ _valgteOppgaver[i].tag +'"><div class="question-choice-title">'+ _valgteOppgaver[i].name +'</div></li>';
}
}
$('.overview-wrapper').html(result);
$('.choice-nav').click(function(){
currentOppgave = _functions.getOppgaveWithTag(this.id);
oppgaveFokus(currentOppgave);
});
}
function updateNavigation(index) {
var nav = '';
if(index >= _valgteOppgaver.length-1) {
nav = '<a href="javascript:void(0)" class="right" data-passage="hvorfor-valgt">Se oppsummering</a>';
} else if(_valgteOppgaver[index].verdier.length != 0) {
nav = '<a href="javascript:void(0)" class="right nesteOppgave">Neste arbeidsoppgave</a>';
} else {
nav = '';
}
$('.navigation.valuesite').html(nav);
$('.navigation a.nesteOppgave').click(function(){
nesteOppgave();
});
}
function updateVerdier(verdi) {
var isInList = false;
for(var i = 0; i<currentOppgave.verdier.length;i++) {
if(currentOppgave.verdier[i] == verdi) {
currentOppgave.verdier.splice(i,1);
isInList = true;
}
}
if(!isInList) {
currentOppgave.verdier.push(verdi);
}
}
function populateVerdier(oppgave) {
var selectedVerdier = '';
var unselectedVerdier = '';
if(oppgave.verdier.length != 0) {
for(var k = 0; k < verdi.length; k++) {
var inList = false;
for(var i = 0; i < oppgave.verdier.length; i++) {
if(verdi[k] == oppgave.verdier[i]) {
inList = true;
}
}
if(inList) {
selectedVerdier += '<span class="verdi-box" id="'+verdi[k].replace(' ', '-')+'-selected">'+verdi[k]+'</span>';
unselectedVerdier += '<span class="verdi-box hidden" id="'+verdi[k].replace(' ', '-')+'">'+verdi[k]+'</span>';
} else {
selectedVerdier += '<span class="verdi-box hidden" id="'+verdi[k].replace(' ', '-')+'-selected">'+verdi[k]+'</span>';
unselectedVerdier += '<span class="verdi-box" id="'+verdi[k].replace(' ', '-')+'">'+verdi[k]+'</span>';
}
}
} else {
for(var k = 0; k < verdi.length; k++) {
unselectedVerdier += '<span class="verdi-box" id="'+verdi[k].replace(' ', '-')+'">'+verdi[k]+'</span>';
selectedVerdier += '<span class="verdi-box hidden" id="'+verdi[k].replace(' ', '-')+'-selected">'+verdi[k]+'</span>';
}
}
$('.selected-verdi').html(selectedVerdier);
$('.unselected-verdi').html(unselectedVerdier);
$('.verdi-box').click(function(){
var id = this.id.split('-selected');
$('#'+id[0]+'-selected').toggleClass('hidden');
$('#'+id[0]).toggleClass('hidden');
updateVerdier(id[0].replace('-', ' '));
updateNavigation(currentIndex);
});
}
%>
<h2>Nå vil vi gjerne vite litt mer om hvorfor du valgte nettopp disse arbeidsplassene</h2>
<br/>
<div class="wrapper">
<div class="overview-wrapper">
</div>
<div id="oppgave-fokus">
<h3>Hvorfor valgte du <span id="fokus-tittel"></span></h3>
<div class="choice-table">
<div class="selected-verdi">
</div>
<h5>Velg de av disse som passer:</h5>
<div class="unselected-verdi">
</div>
</div>
</div>
<div class="navigation valuesite">
</div>
</div>
<%
var _valgteOppgaver = window.setup.valgteOppgaver;
var _functions = window.setup.functions;
var currentOppgave, currentIndex = 0;
var currentTextareaFocus;
//setup before functions
var typingTimer; //timer identifier
var doneTypingInterval = 200; //time in ms, 5 second for example
function setFocusTextarea(focus) {
currentTextareaFocus = focus;
}
function doneTyping () {
clearTimeout(typingTimer);
setListeners();
for(var i = 0; i < currentOppgave.selectedVerdier.length; i++) {
if(currentTextareaFocus.id.replace('-',' ').includes(currentOppgave.selectedVerdier[i].name)) {
currentOppgave.selectedVerdier[i].description = $(currentTextareaFocus).find('input')[0].value;
}
}
}
$(document).on('showpassage:after', function() {
currentOppgave = _valgteOppgaver[0];
oppgaveFokus(currentOppgave);
});
function oppgaveFokus(oppgave) {
$('#fokus-tittel').html(oppgave.name);
populateVerdier(oppgave);
updateNavigation(currentIndex);
updateOverview();
updateQuestions();
}
function nesteOppgave() {
if(!currentAtEdge(currentIndex)) {
currentIndex++;
}
currentOppgave = _valgteOppgaver[currentIndex];
oppgaveFokus(currentOppgave);
}
function currentAtEdge(currentIndex) {
return currentIndex >= _valgteOppgaver.length-1;
}
function updateOverview() {
var result = '';
for(var i = 0; i<_valgteOppgaver.length; i++) {
var verdier = '';
for(var k = 0; k<_valgteOppgaver[i].verdier.length; k++) {
verdier += '<span class="verdi-box">'+_valgteOppgaver[i].verdier[k]+'</span>';
}
result += '<li class="choice-nav" id="'+ _valgteOppgaver[i].tag +'"><div class="question-choice-title">'+ _valgteOppgaver[i].name +'</div></li>';
}
$('.overview-wrapper').html(result);
$('.choice-nav').click(function(){
currentOppgave = _functions.getOppgaveWithTag(this.id);
oppgaveFokus(currentOppgave);
});
}
function updateNavigation(index) {
var nav = '';
if(index >= _valgteOppgaver.length-1) {
nav = '<a href="javascript:void(0)" class="right" data-passage="verdier oppsummering">Se oppsummering</a>';
} else if(_valgteOppgaver[index].verdier.length != 0) {
nav = '<a href="javascript:void(0)" class="right nesteOppgave">Neste arbeidsoppgave</a>';
} else {
nav = '';
}
$('.navigation.valuesite').html(nav);
$('.navigation a.nesteOppgave').click(function(){
nesteOppgave();
});
}
function updateVerdier(verdi) {
var isInList = false;
for(var i = 0; i < currentOppgave.selectedVerdier.length; i++) {
if(currentOppgave.selectedVerdier[i].name == verdi) {
isInList = true;
if(isInList && currentOppgave.selectedVerdier[i].status) {
currentOppgave.selectedVerdier[i].status = false;
} else if(isInList && !currentOppgave.selectedVerdier[i].status) {
currentOppgave.selectedVerdier[i].status = true;
}
}
}
if(!isInList) {
currentOppgave.selectedVerdier.push(new window.setup.arbeidsVerdi(verdi, ''));
}
}
function populateVerdier(oppgave) {
var result = '';
for(var k = 0; k < oppgave.verdier.length; k++) {
var containsValue = false;
for(var i = 0; i < oppgave.selectedVerdier.length; i++) {
if(oppgave.selectedVerdier[i].name.includes(oppgave.verdier[k]) && oppgave.selectedVerdier[i].status == true) {
containsValue = true;
}
}
if(containsValue) {
result += '<span class="verdi-box selected" id="' + oppgave.verdier[k].replace(' ', '-') + '">' + oppgave.verdier[k] + '</span>';
} else {
result += '<span class="verdi-box" id="' + oppgave.verdier[k].replace(' ', '-') + '">' + oppgave.verdier[k] + '</span>';
}
}
$('.verdier-selection').html(result);
$('.verdi-box').click(function(){
$(this).toggleClass('selected');
updateVerdier(this.id.replace('-', ' '));
updateNavigation(currentIndex);
updateQuestions(this.id.replace('-', ' '));
});
}
function updateQuestions(verdi) {
var result = '';
var oppgave = currentOppgave;
for(var k = 0; k < oppgave.selectedVerdier.length; k++) {
if(oppgave.selectedVerdier[k].status == true) {
result += '<span class="choice-question" id="' + oppgave.selectedVerdier[k].name.replace(' ', '-') + '-question"><label><bold>' + oppgave.selectedVerdier[k].name + '</bold> er viktig fordi...<br /><input type="textarea" class="question-text" value="'+ oppgave.selectedVerdier[k].description +'"></label></span>';
}
}
$('.choice-questions').html(result);
setListeners();
}
function setListeners() {
$( '.choice-question' ).keydown(function() {
clearTimeout(typingTimer);
});
$( '.choice-question' ).keyup(function() {
clearTimeout(typingTimer);
typingTimer = setTimeout(doneTyping, doneTypingInterval);
setFocusTextarea(this);
});
}
%>
<h2>Vi vil gjerne vite hvilke av disse som er viktigst for deg</h2>
<br/>
<div class="wrapper">
<div class="overview-wrapper">
</div>
<div id="oppgave-fokus">
<h3>Ved <span id="fokus-tittel"></span>, hvilke av disse verdiene er essensielle for å gjennomføre arbeidsoppgaven?</h3>
<div class="choice-table">
<div class="verdier-selection">
</div>
</div>
<div class="choice-questions">
</div>
</div>
<div class="navigation valuesite">
</div>
</div><%
var _vars = window.setup.variables;
var _valgteOppgaver = window.setup.valgteOppgaver;
$(document).on('showpassage:after', function() {
});
%>
<h2>Dette er en oppsummering av alt vi har gjort</h2>
<div><ul>
<%
for(var i = 0; i<_valgteOppgaver.length; i++) {
print('<div class="arbeidsoppgave-oppsummering"><h3>For å '+ _valgteOppgaver[i].name +' må jeg ha</h3>');
var temp = [];
for(var k = 0; k < _valgteOppgaver[i].selectedVerdier.length; k++) {
if(_valgteOppgaver[i].verdier.includes(_valgteOppgaver[i].selectedVerdier[k].name)) {
temp.push(_valgteOppgaver[i].selectedVerdier[k].name);
print('<li>'+_valgteOppgaver[i].selectedVerdier[k].name+': <br /><div>'+_valgteOppgaver[i].selectedVerdier[k].description+'</div></li>');
}
}
print('<h4>Jeg liker også å ha...</h4>');
for(var k = 0; k < _valgteOppgaver[i].verdier.length; k++) {
if(!temp.includes(_valgteOppgaver[i].verdier[k])) {
print('<li>'+_valgteOppgaver[i].verdier[k]+'</li>');
}
}
print('</div>');
}
%>
</ul></div>
<div>
<p>Dette er veiledende data og er ikke ment å brukes til annet enn å bli bedre kjent med deg.</p>
</div>
<div class="navigation">
<a href="javascript:void(0)" class="left" data-passage="prioritere verdier">Jeg vil endre valgene mine</a>
</div>