Get Grades Done: the joys of Org's simple power

Get Grades Done: the joys of Org's simple power

[Devin Prater]

[-- Attachment #1: Type: text/plain, Size: 2512 bytes --]

So, I’ll try to not turn this into a novella. I am a “Technical Assistant”, and I teach at an adult education sort of trade school. This probably sounds normal, but the only sort of catch is that I am blind, and so are  many of my students, the rest having some vision loss.

So, I have to find workarounds for just about everything I do. I teach Assistive Technology, which is basically how to use tech as a blind/visually impaired person. We have our courses on 😣Moodle😣, because apparently no one has created a learning system that deals with directories and config files for those who do best in that environment, instead of freaking databases, and web interfaces even fatter than I am. I do hate web interfaces, and web interfaces wrapped in “apps” too. It shouldn’t be an app if its built on web tech. Yes, you too, Electron!

Anyways, I have some manual tests I do. I have the questions in an Org-mode file, with checkboxes I can check or leave unchecked. Up until recently, I went down the list and graded them manually. But I thought “Now wait, can’t the computer do this for me? I mean, Org-mode is so powerful, why not make a Lisp thing that does that for me?” So, being a very beginner programmer who still finds it daunting to move my blog from Jekyll to Hugo—I’m almost done with that—and can only print stuff with Python, that didn’t work out so well. I’ll have to actually read through the Elisp Intro to get better at that.

Then, I thought I’d look into the Org manual and see if there was a way to “count” checkboxes. And there is <https://orgmode.org/manual/Checkboxes.html>!  So, I can just put [%] on the heading where I want the grade, and my goodness, it works! I no longer have to manually grade the assignments! That saves so much time for me, and now I just wish the world was in Org-mode so I could just manage everything else through its power as well.

Now, I do wish I could share these “self-grading” performance tests with others. I’ve tried exporting one to HTML, but the grade doesn’t seem to update automatically like it does in Org-mode. And no, other teachers around me are *not* going to switch to Org-mode, let alone Emacs, for this. So, does anyone have any ideas for how this can be shared? I don’t know any Javascript or anything.

So, thanks so much to the Org maintainers, and the community that keeps Org alive. It’s allowed me to write and share so much, and soon I’ll be using it even more with Hugo.

[-- Attachment #2: Type: text/html, Size: 3001 bytes --]

Re: Get Grades Done: the joys of Org's simple power

[Russell Adams]

On Wed, Jun 10, 2020 at 03:38:43PM -0500, Devin Prater wrote:
> Now, I do wish I could share these “self-grading” performance tests with
> others. I’ve tried exporting one to HTML, but the grade doesn’t seem to update
> automatically like it does in Org-mode.

Unfortunately updating the count is performed by a hook in Org when you use C-c
C-c to check/uncheck a box. That information is static in the text, and static
in html.

I'm not aware of a built-in way to handle that case. Sorry.

------------------------------------------------------------------
Russell Adams                            RLAdams@AdamsInfoServ.com

PGP Key ID:     0x1160DCB3           http://www.adamsinfoserv.com/

Fingerprint:    1723 D8CA 4280 1EC9 557F  66E8 1154 E018 1160 DCB3

Re: Get Grades Done: the joys of Org's simple power

[George Mauer]

[-- Attachment #1: Type: text/plain, Size: 1431 bytes --]

You know...I believe some people have gotten emacs running in browser...
You could do it by compiling it to wasm. So in theory you could create a
completely in-browser emacs which is optimized primarily for org mode usage.

Would be kind of an awesome thing for someone to tackle as it would greatly
increase the reach of org. Not easy though. Could probably be a whole
thesis project.

Not sure how well it would work with screen readers and other accessibility
tech though. That would be even more work

On Wed, Jun 10, 2020, 10:24 PM Russell Adams <RLAdams@adamsinfoserv.com>
wrote:

> On Wed, Jun 10, 2020 at 03:38:43PM -0500, Devin Prater wrote:
> > Now, I do wish I could share these “self-grading” performance tests with
> > others. I’ve tried exporting one to HTML, but the grade doesn’t seem to
> update
> > automatically like it does in Org-mode.
>
> Unfortunately updating the count is performed by a hook in Org when you
> use C-c
> C-c to check/uncheck a box. That information is static in the text, and
> static
> in html.
>
> I'm not aware of a built-in way to handle that case. Sorry.
>
> ------------------------------------------------------------------
> Russell Adams                            RLAdams@AdamsInfoServ.com
>
> PGP Key ID:     0x1160DCB3           http://www.adamsinfoserv.com/
>
> Fingerprint:    1723 D8CA 4280 1EC9 557F  66E8 1154 E018 1160 DCB3
>
>

[-- Attachment #2: Type: text/html, Size: 1933 bytes --]

Re: Get Grades Done: the joys of Org's simple power

[Diego Zamboni]

[-- Attachment #1: Type: text/plain, Size: 2891 bytes --]

Hi Devin,

Your could try https://org-web.org/ - it allows online editing of Org files
and a quick test shows that it supports the automatic update of checkbox
counts.

--Diego

On Wed, 10 Jun 2020 at 22:39, Devin Prater <r.d.t.prater@gmail.com> wrote:

> So, I’ll try to not turn this into a novella. I am a “Technical
> Assistant”, and I teach at an adult education sort of trade school. This
> probably sounds normal, but the only sort of catch is that I am blind, and
> so are  many of my students, the rest having some vision loss.
>
> So, I have to find workarounds for just about everything I do. I teach
> Assistive Technology, which is basically how to use tech as a
> blind/visually impaired person. We have our courses on 😣Moodle😣, because
> apparently no one has created a learning system that deals with directories
> and config files for those who do best in that environment, instead of
> freaking databases, and web interfaces even fatter than I am. I do hate web
> interfaces, and web interfaces wrapped in “apps” too. It shouldn’t be an
> app if its built on web tech. Yes, you too, Electron!
>
> Anyways, I have some manual tests I do. I have the questions in an
> Org-mode file, with checkboxes I can check or leave unchecked. Up until
> recently, I went down the list and graded them manually. But I thought “Now
> wait, can’t the computer do this for me? I mean, Org-mode is so powerful,
> why not make a Lisp thing that does that for me?” So, being a very beginner
> programmer who still finds it daunting to move my blog from Jekyll to
> Hugo—I’m almost done with that—and can only print stuff with Python, that
> didn’t work out so well. I’ll have to actually read through the Elisp Intro
> to get better at that.
>
> Then, I thought I’d look into the Org manual and see if there was a way to
> “count” checkboxes. And there is
> <https://orgmode.org/manual/Checkboxes.html>!  So, I can just put [%] on
> the heading where I want the grade, and my goodness, it works! I no longer
> have to manually grade the assignments! That saves so much time for me, and
> now I just wish the world was in Org-mode so I could just manage everything
> else through its power as well.
>
> Now, I do wish I could share these “self-grading” performance tests with
> others. I’ve tried exporting one to HTML, but the grade doesn’t seem to
> update automatically like it does in Org-mode. And no, other teachers
> around me are *not* going to switch to Org-mode, let alone Emacs, for this.
> So, does anyone have any ideas for how this can be shared? I don’t know any
> Javascript or anything.
>
> So, thanks so much to the Org maintainers, and the community that keeps
> Org alive. It’s allowed me to write and share so much, and soon I’ll be
> using it even more with Hugo.
>

[-- Attachment #2: Type: text/html, Size: 3453 bytes --]

Re: Get Grades Done: the joys of Org's simple power

[Steven Harris]

[-- Attachment #1: Type: text/plain, Size: 1868 bytes --]

A simple tailored emacs docker image and a terminal emulator might do the
trick for Mr Prater.  I've recently used a docker image that is a self
contained Gnu Octave application accessed through a web browser in a
similar way that works for sighted folks.
epflsti/octave-x11-novnc-docker:latest

HTH
Steven


On Thu, 11 Jun 2020 at 13:57, George Mauer <gmauer@gmail.com> wrote:

> You know...I believe some people have gotten emacs running in browser...
> You could do it by compiling it to wasm. So in theory you could create a
> completely in-browser emacs which is optimized primarily for org mode usage.
>
> Would be kind of an awesome thing for someone to tackle as it would
> greatly increase the reach of org. Not easy though. Could probably be a
> whole thesis project.
>
> Not sure how well it would work with screen readers and other
> accessibility tech though. That would be even more work
>
> On Wed, Jun 10, 2020, 10:24 PM Russell Adams <RLAdams@adamsinfoserv.com>
> wrote:
>
>> On Wed, Jun 10, 2020 at 03:38:43PM -0500, Devin Prater wrote:
>> > Now, I do wish I could share these “self-grading” performance tests with
>> > others. I’ve tried exporting one to HTML, but the grade doesn’t seem to
>> update
>> > automatically like it does in Org-mode.
>>
>> Unfortunately updating the count is performed by a hook in Org when you
>> use C-c
>> C-c to check/uncheck a box. That information is static in the text, and
>> static
>> in html.
>>
>> I'm not aware of a built-in way to handle that case. Sorry.
>>
>> ------------------------------------------------------------------
>> Russell Adams                            RLAdams@AdamsInfoServ.com
>>
>> PGP Key ID:     0x1160DCB3           http://www.adamsinfoserv.com/
>>
>> Fingerprint:    1723 D8CA 4280 1EC9 557F  66E8 1154 E018 1160 DCB3
>>
>>

[-- Attachment #2: Type: text/html, Size: 2999 bytes --]

Re: Get Grades Done: the joys of Org's simple power

[Leo Okawa Ericson]

Diego Zamboni <diego@zzamboni.org> writes:

> Hi Devin,
>
> Your could try https://org-web.org/ - it allows online editing of Org files
> and a quick test shows that it supports the automatic update of checkbox
> counts.

Or you could try https://github.com/200ok-ch/organice - it is a friendly
fork of org-web.

Re: Get Grades Done: the joys of Org's simple power

[Diego Zamboni]

Hi Leo,

Thanks - I had seen that one too, and couldn't figure out which one
was a fork of the other one. Both have recent activity - do you know
what are the main differences between them?

--Diego

On Fri, Jun 12, 2020 at 5:54 PM Leo Okawa Ericson
<leo@relevant-information.com> wrote:
>
> Diego Zamboni <diego@zzamboni.org> writes:
>
> > Hi Devin,
> >
> > Your could try https://org-web.org/ - it allows online editing of Org files
> > and a quick test shows that it supports the automatic update of checkbox
> > counts.
>
> Or you could try https://github.com/200ok-ch/organice - it is a friendly
> fork of org-web.

Re: Get Grades Done: the joys of Org's simple power

[Phil Regier]

[-- Attachment #1: Type: text/plain, Size: 1939 bytes --]

A friend showed me Org-mode running in spacemacs a few years back, and I
was pretty impressed with how well it seemed to be working, though I
haven't messed with it much myself.  Especially not sure how much sugar it
offers as far as sharing a particular experience with new users, but at the
very least you should be able to include basic usage instructions within
the Org file?

On Wed, Jun 10, 2020 at 9:56 PM George Mauer <gmauer@gmail.com> wrote:

> You know...I believe some people have gotten emacs running in browser...
> You could do it by compiling it to wasm. So in theory you could create a
> completely in-browser emacs which is optimized primarily for org mode usage.
>
> Would be kind of an awesome thing for someone to tackle as it would
> greatly increase the reach of org. Not easy though. Could probably be a
> whole thesis project.
>
> Not sure how well it would work with screen readers and other
> accessibility tech though. That would be even more work
>
> On Wed, Jun 10, 2020, 10:24 PM Russell Adams <RLAdams@adamsinfoserv.com>
> wrote:
>
>> On Wed, Jun 10, 2020 at 03:38:43PM -0500, Devin Prater wrote:
>> > Now, I do wish I could share these “self-grading” performance tests with
>> > others. I’ve tried exporting one to HTML, but the grade doesn’t seem to
>> update
>> > automatically like it does in Org-mode.
>>
>> Unfortunately updating the count is performed by a hook in Org when you
>> use C-c
>> C-c to check/uncheck a box. That information is static in the text, and
>> static
>> in html.
>>
>> I'm not aware of a built-in way to handle that case. Sorry.
>>
>> ------------------------------------------------------------------
>> Russell Adams                            RLAdams@AdamsInfoServ.com
>>
>> PGP Key ID:     0x1160DCB3           http://www.adamsinfoserv.com/
>>
>> Fingerprint:    1723 D8CA 4280 1EC9 557F  66E8 1154 E018 1160 DCB3
>>
>>

[-- Attachment #2: Type: text/html, Size: 2702 bytes --]

Re: Get Grades Done: the joys of Org's simple power

[Devin Prater]

[-- Attachment #1: Type: text/plain, Size: 2646 bytes --]

Well, some teachers are blind, which means Emacspeak, and Spacemax does have visual stuff, so Emacspeak may not work well with that. I’ll have to try Doom Emacs though, maybe that’ll work better. The bigger problem though, is that Emacspeak relies on speech servers, and the one for Windows hasn’t been updated in… quite a while. I just want not only myself and technically inclined sighted teachers to be able to access this, plus its good to have accessible teaching tools no matter what, because you never know when another blind person may want to use it later on.

> On Jun 12, 2020, at 6:23 PM, Phil Regier <phil.regier@gmail.com> wrote:
> 
> A friend showed me Org-mode running in spacemacs a few years back, and I was pretty impressed with how well it seemed to be working, though I haven't messed with it much myself.  Especially not sure how much sugar it offers as far as sharing a particular experience with new users, but at the very least you should be able to include basic usage instructions within the Org file?
> 
> On Wed, Jun 10, 2020 at 9:56 PM George Mauer <gmauer@gmail.com <mailto:gmauer@gmail.com>> wrote:
> You know...I believe some people have gotten emacs running in browser... You could do it by compiling it to wasm. So in theory you could create a completely in-browser emacs which is optimized primarily for org mode usage.
> 
> Would be kind of an awesome thing for someone to tackle as it would greatly increase the reach of org. Not easy though. Could probably be a whole thesis project.
> 
> Not sure how well it would work with screen readers and other accessibility tech though. That would be even more work
> 
> On Wed, Jun 10, 2020, 10:24 PM Russell Adams <RLAdams@adamsinfoserv.com <mailto:RLAdams@adamsinfoserv.com>> wrote:
> On Wed, Jun 10, 2020 at 03:38:43PM -0500, Devin Prater wrote:
> > Now, I do wish I could share these “self-grading” performance tests with
> > others. I’ve tried exporting one to HTML, but the grade doesn’t seem to update
> > automatically like it does in Org-mode.
> 
> Unfortunately updating the count is performed by a hook in Org when you use C-c
> C-c to check/uncheck a box. That information is static in the text, and static
> in html.
> 
> I'm not aware of a built-in way to handle that case. Sorry.
> 
> ------------------------------------------------------------------
> Russell Adams                            RLAdams@AdamsInfoServ.com
> 
> PGP Key ID:     0x1160DCB3           http://www.adamsinfoserv.com/ <http://www.adamsinfoserv.com/>
> 
> Fingerprint:    1723 D8CA 4280 1EC9 557F  66E8 1154 E018 1160 DCB3
> 


[-- Attachment #2: Type: text/html, Size: 4237 bytes --]

Re: Get Grades Done: the joys of Org's simple power

[Phil Regier]

[-- Attachment #1: Type: text/plain, Size: 3776 bytes --]

Oh, my.  I would not have imagined that setting up Emacspeak could be so
complicated.  Was your initial thought that if you could export the
mechanisms in your assignment to interactive HTML (of whatever form) then
you could let the browsers and their various accessibility APIs (of which I
should confess right now I have almost no knowledge) to present that
interactive content in whatever way the consumer of said content has
requested?

I'm far from being an expert, but I've spent my share of time hacking
around and I think there are a variety of ways that one could embed
something like JavaScript (I know, not an ideal choice of languages) in a
variety of ways at several stages in the composition-to-export process that
could render the output "live" if it was sufficiently simple.  And while
I'm especially bad at this part, a long time ago I had limited success
wrapping some transformations in lisp within Org-mode and I've seen others
perform similar trickery with greater success.


On Fri, Jun 12, 2020 at 6:22 PM Devin Prater <r.d.t.prater@gmail.com> wrote:

> Well, some teachers are blind, which means Emacspeak, and Spacemax does
> have visual stuff, so Emacspeak may not work well with that. I’ll have to
> try Doom Emacs though, maybe that’ll work better. The bigger problem
> though, is that Emacspeak relies on speech servers, and the one for Windows
> hasn’t been updated in… quite a while. I just want not only myself and
> technically inclined sighted teachers to be able to access this, plus its
> good to have accessible teaching tools no matter what, because you never
> know when another blind person may want to use it later on.
>
> On Jun 12, 2020, at 6:23 PM, Phil Regier <phil.regier@gmail.com> wrote:
>
> A friend showed me Org-mode running in spacemacs a few years back, and I
> was pretty impressed with how well it seemed to be working, though I
> haven't messed with it much myself.  Especially not sure how much sugar it
> offers as far as sharing a particular experience with new users, but at the
> very least you should be able to include basic usage instructions within
> the Org file?
>
> On Wed, Jun 10, 2020 at 9:56 PM George Mauer <gmauer@gmail.com> wrote:
>
>> You know...I believe some people have gotten emacs running in browser...
>> You could do it by compiling it to wasm. So in theory you could create a
>> completely in-browser emacs which is optimized primarily for org mode usage.
>>
>> Would be kind of an awesome thing for someone to tackle as it would
>> greatly increase the reach of org. Not easy though. Could probably be a
>> whole thesis project.
>>
>> Not sure how well it would work with screen readers and other
>> accessibility tech though. That would be even more work
>>
>> On Wed, Jun 10, 2020, 10:24 PM Russell Adams <RLAdams@adamsinfoserv.com>
>> wrote:
>>
>>> On Wed, Jun 10, 2020 at 03:38:43PM -0500, Devin Prater wrote:
>>> > Now, I do wish I could share these “self-grading” performance tests
>>> with
>>> > others. I’ve tried exporting one to HTML, but the grade doesn’t seem
>>> to update
>>> > automatically like it does in Org-mode.
>>>
>>> Unfortunately updating the count is performed by a hook in Org when you
>>> use C-c
>>> C-c to check/uncheck a box. That information is static in the text, and
>>> static
>>> in html.
>>>
>>> I'm not aware of a built-in way to handle that case. Sorry.
>>>
>>> ------------------------------------------------------------------
>>> Russell Adams                            RLAdams@AdamsInfoServ.com
>>>
>>> PGP Key ID:     0x1160DCB3           http://www.adamsinfoserv.com/
>>>
>>> Fingerprint:    1723 D8CA 4280 1EC9 557F  66E8 1154 E018 1160 DCB3
>>>
>>>
>

[-- Attachment #2: Type: text/html, Size: 5050 bytes --]

Re: Get Grades Done: the joys of Org's simple power

[Devin Prater]

[-- Attachment #1: Type: text/plain, Size: 4139 bytes --]

Yeah, I was hoping to just have an HTML page or something that could be put on Github or just sent in an email attachment, where checking checkboxes would update the fraction cookie.

> On Jun 12, 2020, at 9:17 PM, Phil Regier <phil.regier@gmail.com> wrote:
> 
> Oh, my.  I would not have imagined that setting up Emacspeak could be so complicated.  Was your initial thought that if you could export the mechanisms in your assignment to interactive HTML (of whatever form) then you could let the browsers and their various accessibility APIs (of which I should confess right now I have almost no knowledge) to present that interactive content in whatever way the consumer of said content has requested?
> 
> I'm far from being an expert, but I've spent my share of time hacking around and I think there are a variety of ways that one could embed something like JavaScript (I know, not an ideal choice of languages) in a variety of ways at several stages in the composition-to-export process that could render the output "live" if it was sufficiently simple.  And while I'm especially bad at this part, a long time ago I had limited success wrapping some transformations in lisp within Org-mode and I've seen others perform similar trickery with greater success.
> 
> 
> On Fri, Jun 12, 2020 at 6:22 PM Devin Prater <r.d.t.prater@gmail.com <mailto:r.d.t.prater@gmail.com>> wrote:
> Well, some teachers are blind, which means Emacspeak, and Spacemax does have visual stuff, so Emacspeak may not work well with that. I’ll have to try Doom Emacs though, maybe that’ll work better. The bigger problem though, is that Emacspeak relies on speech servers, and the one for Windows hasn’t been updated in… quite a while. I just want not only myself and technically inclined sighted teachers to be able to access this, plus its good to have accessible teaching tools no matter what, because you never know when another blind person may want to use it later on.
> 
>> On Jun 12, 2020, at 6:23 PM, Phil Regier <phil.regier@gmail.com <mailto:phil.regier@gmail.com>> wrote:
>> 
>> A friend showed me Org-mode running in spacemacs a few years back, and I was pretty impressed with how well it seemed to be working, though I haven't messed with it much myself.  Especially not sure how much sugar it offers as far as sharing a particular experience with new users, but at the very least you should be able to include basic usage instructions within the Org file?
>> 
>> On Wed, Jun 10, 2020 at 9:56 PM George Mauer <gmauer@gmail.com <mailto:gmauer@gmail.com>> wrote:
>> You know...I believe some people have gotten emacs running in browser... You could do it by compiling it to wasm. So in theory you could create a completely in-browser emacs which is optimized primarily for org mode usage.
>> 
>> Would be kind of an awesome thing for someone to tackle as it would greatly increase the reach of org. Not easy though. Could probably be a whole thesis project.
>> 
>> Not sure how well it would work with screen readers and other accessibility tech though. That would be even more work
>> 
>> On Wed, Jun 10, 2020, 10:24 PM Russell Adams <RLAdams@adamsinfoserv.com <mailto:RLAdams@adamsinfoserv.com>> wrote:
>> On Wed, Jun 10, 2020 at 03:38:43PM -0500, Devin Prater wrote:
>> > Now, I do wish I could share these “self-grading” performance tests with
>> > others. I’ve tried exporting one to HTML, but the grade doesn’t seem to update
>> > automatically like it does in Org-mode.
>> 
>> Unfortunately updating the count is performed by a hook in Org when you use C-c
>> C-c to check/uncheck a box. That information is static in the text, and static
>> in html.
>> 
>> I'm not aware of a built-in way to handle that case. Sorry.
>> 
>> ------------------------------------------------------------------
>> Russell Adams                            RLAdams@AdamsInfoServ.com <mailto:RLAdams@AdamsInfoServ.com>
>> 
>> PGP Key ID:     0x1160DCB3           http://www.adamsinfoserv.com/ <http://www.adamsinfoserv.com/>
>> 
>> Fingerprint:    1723 D8CA 4280 1EC9 557F  66E8 1154 E018 1160 DCB3
>> 
> 


[-- Attachment #2: Type: text/html, Size: 6305 bytes --]

Re: Get Grades Done: the joys of Org's simple power

[Leo Okawa Ericson]

Diego Zamboni <diego@zzamboni.org> writes:

> Hi Leo,
>
> Thanks - I had seen that one too, and couldn't figure out which one
> was a fork of the other one. Both have recent activity - do you know
> what are the main differences between them?
>

Well the changelog in org-web hasn't been updated in quite a while:
https://github.com/DanielDe/org-web/blob/master/changelog.org
wheras organice seem to actively developed
https://github.com/200ok-ch/organice/blob/master/changelog.org .

The have a section in their readme that shows how they differ: https://github.com/200ok-ch/organice#org-web

Re: Get Grades Done: the joys of Org's simple power

[Diego Zamboni]

Hi Leo,

> Well the changelog in org-web hasn't been updated in quite a while:
> https://github.com/DanielDe/org-web/blob/master/changelog.org
> wheras organice seem to actively developed
> https://github.com/200ok-ch/organice/blob/master/changelog.org .
>
> The have a section in their readme that shows how they differ: https://github.com/200ok-ch/organice#org-web

Awesome, thanks for the additional pointers!

Devin: Organice supports online editing of files hosted on Dropbox,
Google Drive or WebDAV - maybe this would fit your use case?

--Diego
--Diego

Re: Get Grades Done: the joys of Org's simple power

[Richard Lawrence]

Hi Devin and all,

Devin Prater <r.d.t.prater@gmail.com> writes:

> Yeah, I was hoping to just have an HTML page or something that could
> be put on Github or just sent in an email attachment, where checking
> checkboxes would update the fraction cookie.

I hacked together a quick solution for this. You should be able to just
drop this Javascript into an Org file. When it is included in HTML that
has been exported via the standard Org exporter, it replaces the static
"[ ]" and "[X]" code elements with actual HTML checkboxes, and updates
any progress cookies in the relevant headlines when those boxes are
checked or unchecked.

I haven't tested it extensively, and the code can surely be improved,
but it works for the cases I could think to test.

#+begin_export html
<script type="text/javascript">
  function updateCookiesIn(div) {
      const headline = div.querySelector("h1, h2, h3, h4, h5, h6");
      if (!headline) return;
      const cookies = Array.from(headline.querySelectorAll("code"))
            .filter(c => c.innerText.startsWith("[") && c.innerText.endsWith("]"));
      const fracCookies = cookies.filter(c => c.innerText.includes("/"));
      const pctCookies = cookies.filter(c => c.innerText.includes("%"));

      // The ugly query strings here restrict the selection to checkboxes at *this* level of the hierarchy
      const allTasks = div.querySelectorAll(`#${div.id} > div > ul input[type=checkbox], #${div.id} > div > ol input[type=checkbox]`);
      const completedTasks = div.querySelectorAll(`#${div.id} > div > ul input[type=checkbox]:checked, #${div.id} > div > ol input[type=checkbox]:checked`);

      const newFrac = `[${completedTasks.length}/${allTasks.length}]`;
      const newPctText = allTasks.length
            ? (100 * completedTasks.length / allTasks.length).toFixed(0)
            : "100"; // Org shows 100% for a cookie when there are no checkboxes 
      const newPct = `[${newPctText}%]`;

      fracCookies.forEach(c => c.innerText = newFrac);
      pctCookies.forEach(c => c.innerText = newPct);
  }

  function replaceWithCheckbox(code) {
      const isChecked = code.innerText.includes("X");

      const checkbox = document.createElement("input");
      checkbox.setAttribute("type", "checkbox");
      if (isChecked) checkbox.setAttribute("checked", "checked");
      checkbox.onclick = function (e) {
          const container = findContainingSection(e.target);
          if (!container) return;
          updateCookiesIn(container);
      };

      code.replaceWith(checkbox);
  }

  function findContainingSection(el) {
      if (!el.parentElement) return null;

      const parent = el.parentElement;
      const classes = Array.from(parent.classList);
      if (classes.some(cl => cl.startsWith("outline") && !cl.startsWith("outline-text"))) {
          return parent;
      } else {
          return findContainingSection(parent);
      }
  }

  const orgCheckboxes = document.querySelectorAll(".off > code, .on > code");
  orgCheckboxes.forEach(replaceWithCheckbox);
  
  const orgSections = document.querySelectorAll("div.outline-1, div.outline-2, div.outline-3, div.outline-4, div.outline-5, div.outline-6");
  orgSections.forEach(updateCookiesIn);
</script>
#+end_export

Hope that helps!

-- 
Best,
Richard

Re: Get Grades Done: the joys of Org's simple power

[Devin Prater]

I tried that on my file, but the checkboxes didn’t update. I’ll give you the kind of file I’m working with:

#+title: Performance test
#+begin_export html
<script type="text/javascript">
 function updateCookiesIn(div) {
     const headline = div.querySelector("h1, h2, h3, h4, h5, h6");
     if (!headline) return;
     const cookies = Array.from(headline.querySelectorAll("code"))
           .filter(c => c.innerText.startsWith("[") && c.innerText.endsWith("]"));
     const fracCookies = cookies.filter(c => c.innerText.includes("/"));
     const pctCookies = cookies.filter(c => c.innerText.includes("%"));

     // The ugly query strings here restrict the selection to checkboxes at *this* level of the hierarchy
     const allTasks = div.querySelectorAll(`#${div.id} > div > ul input[type=checkbox], #${div.id} > div > ol input[type=checkbox]`);
     const completedTasks = div.querySelectorAll(`#${div.id} > div > ul input[type=checkbox]:checked, #${div.id} > div > ol input[type=checkbox]:checked`);

     const newFrac = `[${completedTasks.length}/${allTasks.length}]`;
     const newPctText = allTasks.length
           ? (100 * completedTasks.length / allTasks.length).toFixed(0)
           : "100"; // Org shows 100% for a cookie when there are no checkboxes 
     const newPct = `[${newPctText}%]`;

     fracCookies.forEach(c => c.innerText = newFrac);
     pctCookies.forEach(c => c.innerText = newPct);
 }

 function replaceWithCheckbox(code) {
     const isChecked = code.innerText.includes("X");

     const checkbox = document.createElement("input");
     checkbox.setAttribute("type", "checkbox");
     if (isChecked) checkbox.setAttribute("checked", "checked");
     checkbox.onclick = function (e) {
         const container = findContainingSection(e.target);
         if (!container) return;
         updateCookiesIn(container);
     };

     code.replaceWith(checkbox);
 }

 function findContainingSection(el) {
     if (!el.parentElement) return null;

     const parent = el.parentElement;
     const classes = Array.from(parent.classList);
     if (classes.some(cl => cl.startsWith("outline") && !cl.startsWith("outline-text"))) {
         return parent;
     } else {
         return findContainingSection(parent);
     }
 }

 const orgCheckboxes = document.querySelectorAll(".off > code, .on > code");
 orgCheckboxes.forEach(replaceWithCheckbox);

 const orgSections = document.querySelectorAll("div.outline-1, div.outline-2, div.outline-3, div.outline-4, div.outline-5, div.outline-6");
 orgSections.forEach(updateCookiesIn);
</script>
#+end_export

* Performance test
**  Student Name [0/10] [0%]

Date

The student will perform the following features:

1. [ ] 
2. [ ] 
3. [ ] 
4. [ ] 
5. [ ] 
6. [ ] 
7. [ ] 
8. [ ] 
9. [ ] 
10. [ ] 

When I do C-E h o, and check one of the boxes, the grade isn’t updated.

> On Jun 14, 2020, at 4:02 AM, Richard Lawrence <wyley.r@gmail.com> wrote:
> 
> Hi Devin and all,
> 
> Devin Prater <r.d.t.prater@gmail.com> writes:
> 
>> Yeah, I was hoping to just have an HTML page or something that could
>> be put on Github or just sent in an email attachment, where checking
>> checkboxes would update the fraction cookie.
> 
> I hacked together a quick solution for this. You should be able to just
> drop this Javascript into an Org file. When it is included in HTML that
> has been exported via the standard Org exporter, it replaces the static
> "[ ]" and "[X]" code elements with actual HTML checkboxes, and updates
> any progress cookies in the relevant headlines when those boxes are
> checked or unchecked.
> 
> I haven't tested it extensively, and the code can surely be improved,
> but it works for the cases I could think to test.
> 
> #+begin_export html
> <script type="text/javascript">
>  function updateCookiesIn(div) {
>      const headline = div.querySelector("h1, h2, h3, h4, h5, h6");
>      if (!headline) return;
>      const cookies = Array.from(headline.querySelectorAll("code"))
>            .filter(c => c.innerText.startsWith("[") && c.innerText.endsWith("]"));
>      const fracCookies = cookies.filter(c => c.innerText.includes("/"));
>      const pctCookies = cookies.filter(c => c.innerText.includes("%"));
> 
>      // The ugly query strings here restrict the selection to checkboxes at *this* level of the hierarchy
>      const allTasks = div.querySelectorAll(`#${div.id} > div > ul input[type=checkbox], #${div.id} > div > ol input[type=checkbox]`);
>      const completedTasks = div.querySelectorAll(`#${div.id} > div > ul input[type=checkbox]:checked, #${div.id} > div > ol input[type=checkbox]:checked`);
> 
>      const newFrac = `[${completedTasks.length}/${allTasks.length}]`;
>      const newPctText = allTasks.length
>            ? (100 * completedTasks.length / allTasks.length).toFixed(0)
>            : "100"; // Org shows 100% for a cookie when there are no checkboxes 
>      const newPct = `[${newPctText}%]`;
> 
>      fracCookies.forEach(c => c.innerText = newFrac);
>      pctCookies.forEach(c => c.innerText = newPct);
>  }
> 
>  function replaceWithCheckbox(code) {
>      const isChecked = code.innerText.includes("X");
> 
>      const checkbox = document.createElement("input");
>      checkbox.setAttribute("type", "checkbox");
>      if (isChecked) checkbox.setAttribute("checked", "checked");
>      checkbox.onclick = function (e) {
>          const container = findContainingSection(e.target);
>          if (!container) return;
>          updateCookiesIn(container);
>      };
> 
>      code.replaceWith(checkbox);
>  }
> 
>  function findContainingSection(el) {
>      if (!el.parentElement) return null;
> 
>      const parent = el.parentElement;
>      const classes = Array.from(parent.classList);
>      if (classes.some(cl => cl.startsWith("outline") && !cl.startsWith("outline-text"))) {
>          return parent;
>      } else {
>          return findContainingSection(parent);
>      }
>  }
> 
>  const orgCheckboxes = document.querySelectorAll(".off > code, .on > code");
>  orgCheckboxes.forEach(replaceWithCheckbox);
> 
>  const orgSections = document.querySelectorAll("div.outline-1, div.outline-2, div.outline-3, div.outline-4, div.outline-5, div.outline-6");
>  orgSections.forEach(updateCookiesIn);
> </script>
> #+end_export
> 
> Hope that helps!
> 
> -- 
> Best,
> Richard

Re: Get Grades Done: the joys of Org's simple power

[Richard Lawrence]

Hi Devin,

Devin Prater <r.d.t.prater@gmail.com> writes:

> I tried that on my file, but the checkboxes didn’t update. I’ll give you the kind of file I’m working with:

OK, sorry about that!  Two things:

1) I see now that my code assumes the script block runs immediately, so
it doesn't work if the script runs before the document is completely
loaded. I'll fix that and send an update.

2) When I move the script to the end of your file, it works here for me
(on Firefox Nightly). But it could also be that there are browser
differences getting in the way; I used some newer Javascript features, I
think. What browser are you using?

-- 
Best,
Richard

Re: Get Grades Done: the joys of Org's simple power

[Devin Prater]

Ah, I’m using Safari on MacOS 10.15. I can try with Chrome as well, though.

> On Jun 14, 2020, at 11:59 AM, Richard Lawrence <wyley.r@gmail.com> wrote:
> 
> Hi Devin,
> 
> Devin Prater <r.d.t.prater@gmail.com> writes:
> 
>> I tried that on my file, but the checkboxes didn’t update. I’ll give you the kind of file I’m working with:
> 
> OK, sorry about that!  Two things:
> 
> 1) I see now that my code assumes the script block runs immediately, so
> it doesn't work if the script runs before the document is completely
> loaded. I'll fix that and send an update.
> 
> 2) When I move the script to the end of your file, it works here for me
> (on Firefox Nightly). But it could also be that there are browser
> differences getting in the way; I used some newer Javascript features, I
> think. What browser are you using?
> 
> -- 
> Best,
> Richard

Re: Get Grades Done: the joys of Org's simple power

[Richard Lawrence]

Hi Devin,

Devin Prater <r.d.t.prater@gmail.com> writes:

> Ah, I’m using Safari on MacOS 10.15. I can try with Chrome as well, though.

Did it work in Chrome, and/or when you moved the script to the end of
the file?

For what it's worth, here is a new version that should work better
regardless of where it's placed in the document.  The only change is
that the code which replaces the text representation of the checkboxes
with HTML checkboxes has been wrapped in a function that fires on the
"DOMContentLoaded" event.

Hope that's helpful!

-- 
Best,
Richard

#+begin_export html
<script type="text/javascript">
  function updateCookiesIn(div) {
      const headline = div.querySelector("h1, h2, h3, h4, h5, h6");
      if (!headline) return;
      const cookies = Array.from(headline.querySelectorAll("code"))
            .filter(c => c.innerText.startsWith("[") && c.innerText.endsWith("]"));
      const fracCookies = cookies.filter(c => c.innerText.includes("/"));
      const pctCookies = cookies.filter(c => c.innerText.includes("%"));

      // The ugly query strings here restrict the selection to checkboxes at *this* level of the hierarchy
      const allTasks = div.querySelectorAll(`#${div.id} > div > ul input[type=checkbox], #${div.id} > div > ol input[type=checkbox]`);
      const completedTasks = div.querySelectorAll(`#${div.id} > div > ul input[type=checkbox]:checked, #${div.id} > div > ol input[type=checkbox]:checked`);

      const newFrac = `[${completedTasks.length}/${allTasks.length}]`;
      const newPctText = allTasks.length
            ? (100 * completedTasks.length / allTasks.length).toFixed(0)
            : "100"; // Org shows 100% for a cookie when there are no checkboxes 
      const newPct = `[${newPctText}%]`;

      fracCookies.forEach(c => c.innerText = newFrac);
      pctCookies.forEach(c => c.innerText = newPct);
  }

  function replaceWithCheckbox(code) {
      const isChecked = code.innerText.includes("X");

      const checkbox = document.createElement("input");
      checkbox.setAttribute("type", "checkbox");
      if (isChecked) checkbox.setAttribute("checked", "checked");
      checkbox.onclick = function (e) {
          const container = findContainingSection(e.target);
          if (!container) return;
          updateCookiesIn(container);
      };

      code.replaceWith(checkbox);
  }

  function findContainingSection(el) {
      if (!el.parentElement) return null;

      const parent = el.parentElement;
      const classes = Array.from(parent.classList);
      if (classes.some(cl => cl.startsWith("outline") && !cl.startsWith("outline-text"))) {
          return parent;
      } else {
          return findContainingSection(parent);
      }
  }

document.addEventListener("DOMContentLoaded", function(event) { 
  const orgCheckboxes = document.querySelectorAll(".off > code, .on > code");
  orgCheckboxes.forEach(replaceWithCheckbox);
  
  const orgSections = document.querySelectorAll("div.outline-1, div.outline-2, div.outline-3, div.outline-4, div.outline-5, div.outline-6");
  orgSections.forEach(updateCookiesIn);
});

</script>
#+end_export

Re: Get Grades Done: the joys of Org's simple power

[Bastien]

Hi Richard,

Richard Lawrence <wyley.r@gmail.com> writes:

> I haven't tested it extensively, and the code can surely be improved,
> but it works for the cases I could think to test.

thanks for writing and sharing this - perhaps you can add a link to
this message in https://orgmode.org/worg/org-hacks.html ?

Best,

-- 
 Bastien