Případová studie: Kvíz - potřebné skripty na stránce Kvíz

Stránka Kvíz - webpart Skript

Ve stránce Kvíz máme webpart Skript. Ten jednak definuje styly na stránce a pak vlastní skript, který je na stránce používán. Styly jsou definovány na záložce Styly. Ve webpartu definujeme i CSS třídu. Styly, které se mají uplatnit pouze we webpartu Skript, jsou pak vztaženy k této třídě.

Hlavní funkcionalita webpartu je ale na záložce Skript.

function OnLoad()
{
OGForm.AddControl( OGForm.CreateLiteralControl('l1', '

Vyplněním dotazníku souhlasíte se zpracováním poskytnutých osobních údajů pro účely vyhodnocení kvízu.



Question( 1, 'Které z následujících tvrzení je pravdivé?',
'Verzi zdarma je možné použít jen pro nekomerční účely a nezakládá nárok na nové verze.',
'Verzi zdarma může použít i organizace s více než 25 zaměstnanci. Můžete použít i více instancí v režimu zdarma (bez licence) – každou s max. 25. uživateli.',
'',
'',
'',
'');

...

Question( 7, 'Jaké tvrzení není pravdivé?',
'Master Data Management umožňuje získat kontrolu na kritickými daty, zavést Single Point of Truth, eliminovat duplicity a zvýšit kvalitu dat.',
'Znalostní báze nahradí roztříštěnost informací v izolovaných souborech a umožní najít vše na jednom místě propojené odkazy.',
'Kolaborační nástroj nahradí chaos v úkolech předávaných po emailu centrální evidencí s přehledem pro řešitele úkolu, zadavatele, nadřízeného, projektového manažera.',
'Řízení projektového portfolia pomůže se správou portfolia akcií, dluhopisů a dalších cenných papírů.',
'',
'');

gi = OGForm.CreateOGGroup( 'gicontakt', 'Kontaktní údaje', false, false);
OGForm.AddControl( gi);

var r = OGForm.CreateRow();
var c1 = OGForm.CreateCol(false);
var c2 = OGForm.CreateCol(false);

var ti1 = OGForm.CreateOGTitle('ti1', 'Jméno a přijmení', true);
var t1 = OGForm.CreateOGText( 'tName', true, null);
var ti2 = OGForm.CreateOGTitle('ti2', 'Email', true, null);
var t2 = OGForm.CreateOGText( 'tEmail', false, null);

c1.Controls.Add( OGForm.CreateItem(ti1, t1));
c2.Controls.Add( OGForm.CreateItem(ti2, t2));
r.Controls.Add(c1);
r.Controls.Add(c2);
gi.Controls.Add(r);
}

function Question( number, question, answer1, answer2, answer3, answer4, answer5, answer6) /*vykreslí danou otázku*/{
var gi = OGForm.CreateOGGroup( 'gi' + number, number + '. ' + question, false, false);
OGForm.AddControl( gi);

Answer(number, 1, answer1, gi);
Answer(number, 2, answer2, gi);
Answer(number, 3, answer3, gi);
Answer(number, 4, answer4, gi);
Answer(number, 5, answer5, gi);
Answer(number, 6, answer6, gi);
}

function Answer(question_number, answer_number, answer, group) /*vykreslí možné odpovědi u otázky*/
{
if ( !OG.IsNull(answer))
{
var rb = OGForm.CreateOGRadioButton( 'rb' + question_number + '_' + answer_number);
rb.Text = answer;
rb.GroupName = 'question' + question_number;
var r = OGForm.CreateRow();
var c = OGForm.CreateCol(true);
c.Controls.Add( OGForm.CreateItem( null, rb));
r.Controls.Add(c);
group.Controls.Add(r);
}
}

Na záložce Styly definujeme styly - např. barvu pozadí atd.

div.obsah div.page
{
background-color: white;
}
.quiz fieldset / *dolní kraj skupiny – týká se jen tohoto webpartu, protože CSS třídu quiz jsme uvedli na první záložce webpartu */
{
margin-bottom: 30px;
}
....

Stránka Kvíz - tlačítko Uložit

Do stránky vložíme tlačítko typu Skript.

function GetAnswer(question) /* vraci první zaškrtnutou odpověd pro zadanou otázku */
{
for( var i = 1; i <= 7; ++i)
{
var id = 'rb' + question + '_' + i;

if ( OGWebParts['quiz'].OGForm.ExistControl(id) && OGWebParts['quiz'].OGForm.GetControl(id).GetData())
{
return i;
}
}

return 0;
}

var cl = OGModel.ClassDefs['data'];
var dr = OG.DataRow.CreateNew( cl.Id);

dr['name'] = OGWebParts['quiz'].OGForm.GetControl('tName').GetData();
dr['email'] = OGWebParts['quiz'].OGForm.GetControl('tEmail').GetData();


dr['q1'] = GetAnswer(1);
dr['q2'] = GetAnswer(2);
dr['q3'] = GetAnswer(3);
dr['q4'] = GetAnswer(4);
dr['q5'] = GetAnswer(5);
dr['q6'] = GetAnswer(6);
dr['q7'] = GetAnswer(7);

if ( dr['q1'] == 0 || dr['q2'] == 0 || dr['q3'] == 0 || dr['q4'] == 0 || dr['q5'] == 0 || dr['q6'] == 0 || dr['q7'] == 0)
{
OGForm.SetError('Vyplňte prosím všechny otázky.');
}
else if ( OG.IsNull(dr['email']) || OG.IsNull(dr['name']))
{
OGForm.SetError('Vyplňte prosím kontaktní údaje.');
}
else
{
OG.DataRow.SaveData(dr); /* uložení záznamu */

OGForm.SetNextRequestSuccess( OG.MessageLoc.GetText(OGModel.Id, 'quiz_success')); /* uložení záznamu */

//vymazání formuláře
OGForm.RedirectTo( OGContentPage.PageUrl);
}