WebToDate/Ankety/Tipy a návody: Porovnání verzí

Z WebToDate
Skočit na navigaciSkočit na vyhledávání
← Porovnání se starší verzí
 
(Nejsou zobrazeny 3 mezilehlé verze od stejného uživatele.)
Řádek 1: Řádek 1:
[[Category:WebToDate 4.1 Ankety]]
[[Category:WebToDate Ankety]]
[[Category:Ankety]]
[[Category:Ankety]]
== Jak vytvořit anketu, ve které se hlasuje klepnutím na odpověď ==
== Jak vytvořit anketu, ve které se hlasuje klepnutím na odpověď ==
Řádek 78: Řádek 78:
# Založení nové ankety v modulu
# Založení nové ankety v modulu
# Změna ID ankety v těle pomocné zprávy a vygenerování stránky obsahující anketu.
# Změna ID ankety v těle pomocné zprávy a vygenerování stránky obsahující anketu.
== Vytvoření hodnocení článků ==
Pro implementaci hodnocení se postupuje cca následovně:
# Ve WebToDate se založí [[../Reference#Implementace hodnocení|styly pro zobrazení hodnotícího prvku]] před hodnocením a po ohodnocení článku
# Do předlohy pro zprávy se vloží klíčové slovo <nowiki><!--WTD_VOTE(RATEFORM)--></nowiki>
# V modulu Ankety se založí [[../Reference#Nastavení předpisu|předpis]]; nastaví se pouze styly, ostatní nastavení předpisu nemá význam
# Pomocí nabídky '''Administrace''' - '''Hodnocení''' se založí [[../Reference#Hodnocení |definice hodnocení]] a tohoto hodnocení se označí jako výchozí
# V definici hodnocení se doplní textové popisky pro jednotlivé číselné známky.
V tuto chvíli by se měl hodnotící prvek zobrazovat ve stránce s celým textem zprávy. Bez použití javascriptu se hodnocení zobrazí typicky jako formulář s radiopřepínači:
[[Image:ankety-hodnoceni-ukazka1.png|center]]
Obslužná javascriptová funkce vložená do stránky s využitím [http://jquery.com/ jQuery], [http://orkans-tmp.22web.net/star_rating/ pluginu Star Rating] a [http://jqueryui.com/ jQuery UI] pak může vypadat cca následovně
<code><nowiki>function putStars() {
var pocethvezd = $("#rlstars").attr("hodnoceni");
$("#mojeh").hide();
// zobrazit hodnoceni graficky
for(c= 1;c<=pocethvezd; c++){
  $("#rlstars").append('<span class="ui-stars-star ui-stars-star-on"><span>' + c + '</span></span>');
}
}
$(document).ready(function(){
// zjistit pocet hvezdicek a stav pred/po
var pocethvezd = $("#rlstars").attr("hodnoceni");
var stav = $(".ratings").attr("id");
// nacist popisky z formulare
var labels=new Array();
$(".hodnoceni label input").each(function(index) {
    labels[index] = $(this).attr("title");
});
// schovat prvky formulare a ostatni­ prvky pouze pro non-js
$(".hodnoceni").children().hide();
$("#hodnotit").hide();
// zmenit formular na hvezdicky
$(".hvezdy").stars({
cancelShow: false,
callback: function(ui, type, value, event){
$(".ratings").load($("#voteform").attr("action") + ' .ratings',{'rating-bar':value}, function(response, status, xhr) {
putStars();
  });
}
});
// umisti popisky ke hvezdam
$(".hvezdy .ui-stars-star").each(function(index) {
    $(this).attr("title", labels[index]);
});
if (stav=="po_hlasovani") {
putStars();
}
});</nowiki></code>
Zobrazení hodnotícího prvku se zapnutým javascriptem pak může být formou grafických obrázků:
[[Image:ankety-hodnoceni-ukazka.png|center]]

Aktuální verze z 15. 6. 2012, 10:53

Jak vytvořit anketu, ve které se hlasuje klepnutím na odpověď

Styl, kterým se formátuje anketa ve stavu před hlasováním, nastavte dle následujícího příkladu.

Hlavička 

<table cellpadding="2" cellspacing="0" border="1" align="center" class="anketa_clanek">
<tr><td bgcolor="#efefef" colspan="2">
<strong>Anketa: <!--WTD_VOTE(NAME)--></strong>
</td></tr>
<tr><td colspan="2">
<!--WTD_VOTE(DESCRIPTION)-->
</td></tr>

Tělo 

<tr><td>
<a href="<!--WTD_VOTE(VOTEIDXURL)-->"><!--WTD_VOTE(ANSWER)--></a>
</td>
<td>
<img src="/images/vote/voteblue.gif" height="12" width="<!--WTD_VOTE(IMGWIDTH)-->"> (<!--WTD_VOTE(PERCENTAGE)-->%)
</td>
</tr>

Patička 

<tr><td bgcolor="#efefef" colspan="2">
Celkem již hlasů: <!--WTD_VOTE(TOTAL)-->
</td></tr></table>

Tento styl nevyžaduje HTML formulář, za klíčové slovo <!--WTD_VOTE(VOTEIDXURL)--> se dosadí kompletní URL potřebné pro započítání hlasu a zobrazení ankety ve stavu po hlasování.

Anketa na stránkách jako iframe

Chcete-li na různých typech stránek zobrazovat anketu v "živém" stavu (tj. zobrazit např. průběžné výsledky hlasování ještě předtím, než uživatel hlasoval apod.), je třeba vložit anketu jako iframe - např. úvodní stránka webu je typicky generována staticky a tudíž by tohoto efektu nebylo možné z principu dosáhnout jinak. Postup je následující:

1. WebToDate styly pro ankety založte běžným způsobem např. dle příkladů uvedených v této příručce.

2. Předlohu pro anketu založte jako kompletní HTML stránku, která se bude zobrazovat uvnitř iframe, vzorový kód předlohy je např.: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<title>Anketa</title>
</head>
<body>
<div id="outerdiv">
<div id="anketa">
<!--WTD_VOTE(VOTEFORM)-->
</div>
</div>
</body>
</html>

3. V definici předpisu pro ankety nezaškrtávejte volbu Zobrazit samostatně

4. Založte styl pro zprávy nazvaný např. "Anketa iframe", v těle stylu použijte přibližně kód 

<iframe src="/scripts/modules/vote/vote.php?id=<!--WTD_F(BODY)-->" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="210" height="245"></iframe>

5. Založte anketu, v ní zvolte připravený předpis, zaškrtněte aktivní a zobrazovat výsledky bez hlasování.

6. Založte zprávu, kde v těle zapište ID právě založené ankety, vložte ji staticky na oblast na stránce, kde se má anketa nacházet a pro zprávu zvolte styl "Anketa iframe". Stránku vygenerujte. Pohled na takovou pomocnou zprávu ve WebToDate je na následujícím otisku obrazovky:

V tomto příkladu je použito pro zaznamenání ID ankety tělo zprávy, je samozřejmě možné použít jakékoli jiné textové pole struktury WebToDate zpráv.

Chcete-li následně vyměnit anketu za jinou, jsou třeba dva kroky:

  1. Založení nové ankety v modulu
  2. Změna ID ankety v těle pomocné zprávy a vygenerování stránky obsahující anketu.

Vytvoření hodnocení článků

Pro implementaci hodnocení se postupuje cca následovně:

  1. Ve WebToDate se založí styly pro zobrazení hodnotícího prvku před hodnocením a po ohodnocení článku
  2. Do předlohy pro zprávy se vloží klíčové slovo <!--WTD_VOTE(RATEFORM)-->
  3. V modulu Ankety se založí předpis; nastaví se pouze styly, ostatní nastavení předpisu nemá význam
  4. Pomocí nabídky Administrace - Hodnocení se založí definice hodnocení a tohoto hodnocení se označí jako výchozí
  5. V definici hodnocení se doplní textové popisky pro jednotlivé číselné známky.

V tuto chvíli by se měl hodnotící prvek zobrazovat ve stránce s celým textem zprávy. Bez použití javascriptu se hodnocení zobrazí typicky jako formulář s radiopřepínači:

Obslužná javascriptová funkce vložená do stránky s využitím jQuery, pluginu Star Rating a jQuery UI pak může vypadat cca následovně 

function putStars() {
			var pocethvezd = $("#rlstars").attr("hodnoceni");
			$("#mojeh").hide();
 			// zobrazit hodnoceni graficky
			for(c= 1;c<=pocethvezd; c++){
			   $("#rlstars").append('<span class="ui-stars-star ui-stars-star-on"><span>' + c + '</span></span>');
			}
 		}

		$(document).ready(function(){
			// zjistit pocet hvezdicek a stav pred/po
			var pocethvezd = $("#rlstars").attr("hodnoceni");	
			var stav = $(".ratings").attr("id");
			// nacist popisky z formulare
			var labels=new Array();
			$(".hodnoceni label input").each(function(index) {
    				labels[index] = $(this).attr("title");
			});
			// schovat prvky formulare a ostatni­ prvky pouze pro non-js
			$(".hodnoceni").children().hide();
			$("#hodnotit").hide();
			// zmenit formular na hvezdicky
			$(".hvezdy").stars({
				cancelShow: false,
				callback: function(ui, type, value, event){
					$(".ratings").load($("#voteform").attr("action") + ' .ratings',{'rating-bar':value}, function(response, status, xhr) {
						putStars();
  					});
				}
			});
			// umisti popisky ke hvezdam
			$(".hvezdy .ui-stars-star").each(function(index) {
    				 $(this).attr("title", labels[index]);
			});
			if (stav=="po_hlasovani") {
				putStars();
			}

		});

Zobrazení hodnotícího prvku se zapnutým javascriptem pak může být formou grafických obrázků:

Citováno z „https://wiki.webtodate.cz/index.php?title=WebToDate/Ankety/Tipy_a_návody&oldid=4267“