TOC's from many pages

By ErichSteinboeckErichSteinboeck

Description

Here's a half-baked solution for discussion thread “TOC's from many pages displayed on one?”

Although this allows you to pull in the TOC's, they aren't linking to their respective pages (but to the current page instead) and fold/unfold only works for the first TOC.

Code

[[module ListPages category="code" limit="9" order="pageEditedDesc"]]
[[table]][[row]]
[[cell]][[[%%page_unix_name%%]]][[/cell]][[/row]]
[[row]]
[[cell]]
[[div style="display : none"]]
[[include %%page_unix_name%%]]
[[/div]]
[[toc]]
[[/cell]][[/row]][[/table]]
[[/module]]

In action

make-clock

Description

It same time on your phone :)

Code

Insert this code into your page

[[html]]
<!DOCTYPE html>
<html>
<body>

<canvas id="canvas" width="400" height="400"
style="background-color:#333">
</canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}
</script>

</body>
</html>
[[/html]]

In action

After inserting

Table of Contents
eisagogi

Η εργασία αυτή εκπονήθηκε στο πλαίσιο του Σεμιναρίου Γ03Σ06 – «Σχεδιασμός και ανάπτυξη διδακτικού υλικού σε διαδικτυακό περιβάλλον» με διδάσκοντα τον Δρ. Μιχαήλ Κλεισαρχάκη του ΠΤΔΕ του Πανεπιστημίου Κρήτης, κατά το χειμερινό εξάμηνο του ακαδημαϊκού έτους 2020-2021.Η εκπαιδευτική αυτή εφαρμογή απευθύνεται σε μαθητές της Στ' τάξης. Τα γνωστικά αντικείμενα που εμπλέκονται στη διδακτική αυτή προσέγγιση είναι: Η Φυσική Αγωγή και Μελέτη του περιβάλλοντος. Σκοπός της εργασίας είναι να προσφέρει μια εναλλακτική διδακτική προσέγγιση του θέματος το οποίο πραγματεύεται, αξιοποιώντας το περιβάλλον ΠΥΘΕΑΣ: WikiQuESD βασισμένο σε κοινωνικο-εποικοδομιστικές προσεγγίσεις διδασκαλίας και μάθησης.

Table of Contents
101andeskarl-s-scp

Description

put description what kind of problem does the solution solve and how

Code

put the code here

In action

link to the implemented solution on a Wikidot site or put a working example here

Table of Contents
tag

Description

You can disguise the tags and include a link.

Code

[[include :snippets:tag
|tag1=snippets
…
]]

Syntax

Item name Initial value Description
tag1 none You can specify them one at a time just as you would a normal tag.
fake1 false You can set the title of the link you want to fake.
… … …
tag256 … …
fake256 … …

In action

snippets000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

[[include :snippets:tag
|tag1=snippets
…
]]

This is a tag (fake)!!000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

[[include :snippets:tag
|tag1=snippets
|fake1=This is a tag (fake)!!
]]

Important

Tags used in this syntax do not register with the tag as an article.
colalt

Description

Speaking of multiple collapsibles, there's Boyu12Boyu12's colmod.
I wanted to make a similar one, so I used the collapsible-block code to create multiple collapsibles.
The sooner you see it in action first, the better.

Demo1

Colalt is colalt itself…

+ show

Syntax

And the source code is different in the odd and even layers.
You must be wondering what are odd and even layers?

The first layer of colalt is the first layer, and when you nest the colalt in order, the second layer, the third layer, and so on.
In this case, the odd or even number of n in the n layer is determined by whether the n are odd layer or even layer.

Item name Data type Initial value Description
oddtop [ null(none) Add [ as described above.
oddend [ null(none) Add [ as described above.
eventop [ null(none) Add [ as described above.
evenend [ null(none) Add [ as described above.
show String + show block Open link text.
hide String - hide block Close link text.
nohide true,false false true will not display the close link.
folded true,false true false leaves it open and can be collapsed by the user at will.
In this case, add f at the beginning of oddtop, eventop, oddend, and evenend.
oddtop → foddtop
eventop → feventop
oddend → foddend
evenend → fevenend
This is a See Demo 4 for more information.

Code

You can add/modify parameters as needed by enclosing the part you want to fold with the following colalt.

[[include :snippets:colalt |oddtop=[|show=+open|hide=-close]]
…
[[include :snippets:colalt |eventop=[|show=+open|hide=-close]]
…
[[include :snippets:colalt |evenend=[|show=+open|hide=-close|nohide=true]]
[[include :snippets:colalt |oddend=[|nohide=true]]

In action

Demo 2

If you omit nohide in oddend or evenend and set hide…

+ open

Demo 3

If you omit hide in oddtop or eventop and set nohide=true…

+ open

Demo 4

If you set folded=false…

- close

You can reproduce the collapsible folded="no".
You need to convert it to
oddtop → foddtop
eventop → feventop
oddend → foddend
evenend → fevenend .

[[include :snippets:colalt |foddtop=[|folded=false|nohide=true|hide=- close]]
You can reproduce the collapsible folded="no".
[[include :snippets:colalt |foddend=[|folded=false|show=+ open|nohide=true]]

Demo 5

If you enclose a colalt with [[div class="collapsiblealt"]] and [[/div]]…

Login

Demo6

Important

Cannot be used within [[iftags]].

Cannot be used within [[collapsible]].

Skipping and closing odd numbers causes clutching.
tecnicas-de-proteccion

Description

This is not a snippet of Wikidot code to use !
This is a comercial for google modules to use in spain (I believe, Helmut_pdorfHelmut_pdorf)
This has nothing to do with wikidot helping code!

  • La seguridad informática es fundamental hoy en día en Internet para tener una mayor seguridad y privacidad a la hora de navegar.
  • Aqui podrás ver una tabla con unos puntos de información relacionada con seguridad informática, hackeos, vulnerabilidades de seguridad en diferentes portales y software

Code

[[table style="margin: 0 10px;"]] [[row]] [[cell style="padding: 10px; background-color: #DDDDEE; border: 1px solid silver; width: 50%;"]]  **Ética y Seguridad Informática**[[/cell]] [[/row]] [[row]] [[cell style="padding: 10px; background-color: #DDEEDD; border: 1px solid silver"]] **1.Seguridad Informática** * Vulnerabilidad de los Sistemas Informáticos * Tipos de Malware* Otras Amenazas además del Malware* Técnicas de Protección: Activas y Pasivas[[/cell]] [[cell style="padding: 10px; background-color: #DDDDEE; border: 1px solid silver"]]**2.2 Redes Sociales y de Intercambio*** Clasificación de las RRSS* Redes de Intercambio P2P [[/cell]] [[/row]] [[/table]][[table style="margin: 0 10px;"]] [[row]] [[cell style="padding: 10px; background-color: #DDDDEE; border: 1px solid silver; width: 50%;"]]**1.5 Seguridad en la Red y en la Nube***Seguridad de las Contraseñas* Protección de la Identidad y la Privacidad* Certificado y Firma Digital* DNI*Electrónico* Protección de Dispositivos Móviles[[/cell]] [[cell style="padding: 10px; background-color: #DDEEDD; border: 1px solid silver"]] **2.3 Buenas Prácticas y Netiqueta*** Identidad y Reputación Digital* Respeto Digital y Netiqueta* Protección de Datos Personales* Prevención del Fraude [[/cell]] [[/row]] [[row]] [[cell style="padding: 10px; background-color: #DDEEDD; border: 1px solid silver"]] **2.Ética y Estética en la Red*** La Sociedad de la Información* Cambios Sociales* Cambios Laborales Brecha Digital[[/cell]] [[cell style="padding: 10px; background-color: #DDDDEE; border: 1px solid silver"]] **2.4 Aspectos Legales*** Tipos de Licencias de Software* Licencias de Distribución de Contenidos* Ley Orgánica de Protección de Datos Española* Derechos ARCO* Reglamento General de Protección de Datos Europeo [[/cell]] [[/row]] [[/table]]

In action

Ética y Seguridad Informática
1.Seguridad Informática * Vulnerabilidad de los Sistemas Informáticos * Tipos de Malware* Otras Amenazas además del Malware* Técnicas de Protección: Activas y Pasivas 2.2 Redes Sociales y de Intercambio* Clasificación de las RRSS* Redes de Intercambio P2P
1.5 Seguridad en la Red y en la Nube*Seguridad de las Contraseñas* Protección de la Identidad y la Privacidad* Certificado y Firma Digital* DNI*Electrónico* Protección de Dispositivos Móviles 2.3 Buenas Prácticas y Netiqueta* Identidad y Reputación Digital* Respeto Digital y Netiqueta* Protección de Datos Personales* Prevención del Fraude
2.Ética y Estética en la Red* La Sociedad de la Información* Cambios Sociales* Cambios Laborales Brecha Digital 2.4 Aspectos Legales* Tipos de Licencias de Software* Licencias de Distribución de Contenidos* Ley Orgánica de Protección de Datos Española* Derechos ARCO* Reglamento General de Protección de Datos Europeo
Table of Contents
falling-snowflakes-effect

Falling snowflakes over pages

  • Put the code in any page you want the effect.
  • Or put it in the Sidebar to has the effect in all pages.
  • Code no need be inside HTML tags

Code

[[module CSS]]
/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
[[/module]]
[[div class="snowflakes" aria-hidden="true"]]
  [[div class="snowflake"]]
  ❅
  [[/div]]
  [[div class="snowflake"]]
  ❆
  [[/div]]
  [[div class="snowflake"]]
  ❅
  [[/div]]
  [[div class="snowflake"]]
  ❆
  [[/div]]
  [[div class="snowflake"]]
  ❅
  [[/div]]
  [[div class="snowflake"]]
  ❆
  [[/div]]
  [[div class="snowflake"]]
    ❅
  [[/div]]
  [[div class="snowflake"]]
    ❆
  [[/div]]
  [[div class="snowflake"]]
    ❅
  [[/div]]
  [[div class="snowflake"]]
    ❆
  [[/div]]
  [[div class="snowflake"]]
    ❅
  [[/div]]
  [[div class="snowflake"]]
    ❆
  [[/div]]
[[/div]]

In action

► Click here to see full page in action 🔎
html5player

Description

Currently we only have a Flash-based option for audio and video inclusion. These snippets fix that by providing an HTML5-based alternative (which should really be the default by now).

+ show code

Code

You can create audio and video embeds like this:

[[include :snippets:html5player
|type=audio
|url=audio file url
]]

If you want the file to play automatically, do it this way:

[[include :snippets:html5player
|type=video
|url=video file url
|autoplay=true
]]

type should be "video" or "audio".
autoplay is optional and only takes the value "true" if you use it. It's off by default.

Due to how the audio and video elements are implemented, they are not stylable this way, but this embed can of course be extended to provide a custom layout which can be styled.

In action

Table of Contents
mail-to-all-moderators

Description

I haven't found a solution so I don't know if this is the proper way to ask the question. Feel free to remove the page if not the appropriate way!

I would like to know if it is possible to create a link that would open a new mail in outlook that is destinated to all moderators (mail addresses can actually appear in the mail, it's not a problem).

Is it possible to ask the site to go get the mail addresses in the wikidot database or do I have to list all the actual addresses in the code?

The only way I see to do this would be the code below. But I would like to refer to the wikidot database so I don't have to change all the links when there is a change in the staff.

The goal is that the user will warn all moderators when the create a new page. If an automatic solution is available for every page creation it would work as well (even better) but it has to be by mail, as I expect people not to check their private messages on a regular basis.

Thanks!

Code

[mailto:email1@mail.com; email2@mail.com,... click here to contact moderators]
Table of Contents

Thanks to tsangk for this great snippet: conditional-blocks

text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]

Other snippets posted by ErichSteinboeck

Redirect: To - 16 Feb 2012 01:37
Module Listpages Tags - 16 Feb 2012 01:24
Module Feed Drilldown: Details Page - 16 Feb 2012 01:24
Module Feed Drilldown - 16 Feb 2012 01:24
Module Feed: Collapsible - 16 Feb 2012 01:23
Module Categories - 16 Feb 2012 01:23
MiniRecentPosts With Limit - 16 Feb 2012 01:23
ListPages: Horizontal? - 16 Feb 2012 01:20
Choose A Page! - 15 Feb 2012 00:32
Redirect: From (1st) - 01 Mar 2009 18:18
Redirect: From (2nd) - 01 Mar 2009 18:17

Rate this solution

If you think this solution is useful — rate it up!

rating: +1+x
Add a New Comment
toc
page revision: 4, last edited: 16 Feb 2012 01:47
Edit Rate (+1) Tags Discuss (1) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License