Some Enhancements to the Prolog

Playground and ALD Notebooks

for the Modern Prolog Classroom

"Classic" Playground and ALD functionality

• Fully in-browser (wasm, no server): scalability, privacy, security.
  • We teach > 450 students at a time with no infrastructure (number actually unlimited).

• Prolog Playground - full in-browser IDE with:
  • editor, top level, source-level debugger
  • documenter
  • unit testing, analysis/verification, specializer, ...
  + Easy code sharing and embedding in slides, notes, etc.

  (e.g., this link or the links in our course material on Prolog/(C)LP)

• Active Logic Documents (ALDs) - notebooks with:
  • in-browser runnable Prolog examples and quizzes
  • e.g., this example

let e = pg.preview_el;
e.innerHTML = `
<div style="margin-top: -15px;"></div>
`;
pg.show_preview(true);
pg.update_inner_layout();

• Teaching Prolog with Active Logic Documents (in "Prolog: The Next 50 Years")
• An s(CASP) In-Browser Playground based on Ciao Prolog

let e = pg.preview_el;
e.innerHTML = `
          <iframe
                  src="https://ciao-lang.org/playground/?code=%3A-%20module(puzzle%2C%5Bsolution%2F1%5D).%0A%3A-%20use_package(doccomments).%0A%0A%25!%20%5Ctitle%20Example%20-%20A%20simple%20puzzle%0A%0A%25!%20%5Cmodule%20Write%20a%20Prolog%20program%20that%20generates%20(as%20a%20list)%20a%20sequence%20that%3A%20%0A%25%20%0A%25%20-%20includes%20three%201's%2C%20three%202's%2C%20.%20.%20.%20%2C%20and%20three%209's%2C%20%0A%25%20%0A%25%20-%20and%20between%20each%20digit%20i%20and%20the%20next%20i%20there%20are%20exactly%20i%0A%25%20%20%20elements.%0A%25%20%20%20%0A%25%20E.g.%3A%0A%25%20%0A%25%20%60%5B1%2C9%2C1%2C2%2C1%2C8%2C2%2C4%2C6%2C2%2C7%2C9%2C4%2C5%2C8%2C6%2C3%2C4%2C7%2C5%2C3%2C9%2C6%2C8%2C3%2C5%2C7%5D%60%0A%0A%25!%20solution(S)%3A%20%60S%60%20is%20a%20solution%20to%20the%20puzzle%0A%0Asolution(%20S%20)%20%3A-%0A%20%25%20S%20must%20be%20a%2027%20element%20list%3A%20%0A%20S%20%3D%20%5B_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%5D%2C%0A%20%25%20(You%20can%20also%20do%3A%20N%20is%203*9%2C%20length(S%2CN))%0A%20sublist(%20%5B1%2C_%2C1%2C_%2C1%5D%2C%20S%20)%2C%0A%20sublist(%20%5B2%2C_%2C_%2C2%2C_%2C_%2C2%5D%2C%20S%20)%2C%0A%20sublist(%20%5B3%2C_%2C_%2C_%2C3%2C_%2C_%2C_%2C3%5D%2C%20S%20)%2C%0A%20sublist(%20%5B4%2C_%2C_%2C_%2C_%2C4%2C_%2C_%2C_%2C_%2C4%5D%2C%20S%20)%2C%0A%20sublist(%20%5B5%2C_%2C_%2C_%2C_%2C_%2C5%2C_%2C_%2C_%2C_%2C_%2C5%5D%2C%20S%20)%2C%0A%20sublist(%20%5B6%2C_%2C_%2C_%2C_%2C_%2C_%2C6%2C_%2C_%2C_%2C_%2C_%2C_%2C6%5D%2C%20S%20)%2C%0A%20sublist(%20%5B7%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C7%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C7%5D%2C%20S%20)%2C%0A%20sublist(%20%5B8%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C8%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C8%5D%2C%20S%20)%2C%0A%20sublist(%20%5B9%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C9%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C_%2C9%5D%2C%20S%20).%0A%0A%25!%20sublist(%20Y%2C%20XYZ%20)%3A%20List%20%60Y%60%20is%20a%20sublist%20of%20list%20%60XYZ%60.%0A%25!%20%5Cdoinclude%20sublist%2F2%0Asublist(%20Y%2C%20XYZ%20)%20%3A-%20%0A%20append(%20_X%2C%20YZ%2C%20XYZ%20)%2C%20%20append(%20Y%2C%20_Z%2C%20YZ%20).%0A%0A%25!%20append(%20K%2C%20L%2C%20M%20)%3A%20%20%60M%60%20is%20the%20concatenation%20of%20lists%20%60K%60%20and%20%20%60L%60.%0A%25%20(It%20is%20a%20built-in%20in%20most%20Prologs.)%0A%0A%25%20append(%20%5B%5D%2C%20X%2C%20X%20).%0A%25%20append(%20%5BE%7CX%5D%2C%20Y%2C%20%5BE%7CZ%5D%20)%20%20%3A-%20%20append(%20X%2C%20Y%2C%20Z%20).%0A&ext=.pl"
                  title="The Prolog Playground"
                  width="1055"
                  height="655"
                  style="
                      zoom: 0.64;
                      border: 4px solid orange;
                      border-radius: 8px;
                      position: absolute;
                      top: -30px;
                      left: 0px;
                  ">
          </iframe>
`;
pg.show_preview(true);
pg.update_inner_layout();

The new functionality

• Playground now has two modes for:
  • developing code (IDE), or
  • developing notebooks with running examples and quizzes

• Slides: one can now also
  • develop slides with running examples and quizzes
  • make presentations with the playground (e.g., these slides)

• Reactive mode: feedback and results are given on-the-fly

• New facilities for student self-assessment

• New facilities for interactive collaboration in the class

• LPTP theorem prover integration, etc.

let e = pg.preview_el;
e.innerHTML = `
          <iframe 
                  src="https://ciao-lang.org/playground/?code=&ext=.pl"
                  title="The Ciao Prolog Playground"
                  width="1055"
                  height="655"
                  style="
                      zoom: 0.64;
                      border: 4px solid orange;
                      border-radius: 8px;
                      position: absolute;
                      top: -30px;
                      left: 0px;
                  ">
          </iframe>
`;
pg.show_preview(true);
pg.update_inner_layout();

let e = pg.preview_el;
e.innerHTML = `
          <iframe 
                  src="https://ciao-lang.org/playground/"
                  title="The Ciao Prolog Playground"
                  style="
                      position: absolute;
                      zoom: 0.45;
                      border: 4px solid orange;
                      border-radius: 8px;
                      top: 60px; left: 0px;
                      width: 800px;
                      height: 500px;
                      transform: perspective(800px) rotateY(0deg) rotateX(-5deg);
                      transform-origin: center center;
                      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
                  ">
          </iframe>
          <iframe 
                  src="https://ciao-lang.org/playground/"
                  title="The Ciao Prolog Playground"
                  style="
                      position: absolute;
                      zoom: 0.40;
                      border: 4px solid red;
                      border-radius: 8px;
                      top: 0px; right: 100px;
                      width: 800px;
                      height: 500px;
                      transform: perspective(800px) rotateY(-10deg) rotateX(5deg);
                      transform-origin: center center;
                      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
                  ">
          </iframe>
          <iframe 
                  src="https://ciao-lang.org/playground/"
                  title="The Ciao Prolog Playground"
                  style="
                      position: absolute;
                      zoom: 0.5;
                      border: 4px solid purple;
                      border-radius: 8px;
                      top: 280px; right: 200px;
                      width: 800px;
                      height: 500px;
                      opacity: 0.8;
                      transform: perspective(800px) rotateY(-10deg) rotateX(5deg);
                      transform-origin: center center;
                      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
                  ">
          </iframe>
          <span style="position: absolute; top: 210px; left: 190px; font-size: 3rem;">👦🏻</span>
          <span style="position: absolute; top: 170px; right: 40px; font-size: 2.5rem;">👩🏾‍🦱</span>
          <span style="position: absolute; top: 340px; right: 170px; font-size: 3rem;">🧑🏼</span>          
  `;
pg.show_preview(true);
pg.update_inner_layout();

let e = pg.preview_el;
e.innerHTML = `
          <iframe 
                  src="https://ciao-lang.org/playground/lptp.html"
                  title="The Ciao Prolog Playground"
                  width="1055"
                  height="655"
                  style="
                      zoom: 0.64;
                      border: 4px solid orange;
                      border-radius: 8px;
                      position: absolute;
                      top: -30px;
                      left: 0px;
                  ">
          </iframe>
`;
pg.show_preview(true);
pg.update_inner_layout();

How we use these tools for teaching Prolog and (C)LP

• Lectures:
  • Still some traditional slides, notes, etc. in use
    • Generated with traditional tools, but links to examples (example)
    • URL generated using the playground [Share!] button
  • ALDs very useful for exercises and assignments (including self-assessment)
  • New interactive collaboration very useful to keep attention in class
  • (Ciao's) fair search rules so non-termination does not hamper first steps (last year's paper).

• Personal work by students:
  • Some students install the system and use VSC or Emacs
  • But many prefer the playground
    • Practically the same functionality
      • Pure LP (with several search rules, tabling), ISO-Prolog, higher-order, functional syntax, constraints, ASP/s(CASP), etc.
    • Speed quite enough for assignments (about 50% of installed version)
  • ALDs for exercises and assignments (also 'Deliverit')
  • Interactivity for participation in class

Course slides with links containing code

let e = pg.preview_el;
e.innerHTML = `
<iframe
  src="https://cliplab.org/~logalg/slides/3_prolog_language.pdf" 
  width="100%" 
  height="400px" 
  style="border:none;" 
  title="Embedded PDF Viewer"
  >
</iframe>
`;
pg.show_preview(true);
pg.update_inner_layout();