From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <emacs-orgmode-bounces+larch=yhetil.org@gnu.org>
Received: from mp0 ([2001:41d0:2:4a6f::])
	(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits))
	by ms11 with LMTPS
	id WMWCMutK5l5bCgAA0tVLHw
	(envelope-from <emacs-orgmode-bounces+larch=yhetil.org@gnu.org>)
	for <larch@yhetil.org>; Sun, 14 Jun 2020 16:06:03 +0000
Received: from aspmx1.migadu.com ([2001:41d0:2:4a6f::])
	(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits))
	by mp0 with LMTPS
	id kL5pLutK5l79CwAA1q6Kng
	(envelope-from <emacs-orgmode-bounces+larch=yhetil.org@gnu.org>)
	for <larch@yhetil.org>; Sun, 14 Jun 2020 16:06:03 +0000
Received: from lists.gnu.org (lists.gnu.org [209.51.188.17])
	(using TLSv1.2 with cipher ECDHE-RSA-AES256-GCM-SHA384 (256/256 bits))
	(No client certificate requested)
	by aspmx1.migadu.com (Postfix) with ESMTPS id 2E04894001C
	for <larch@yhetil.org>; Sun, 14 Jun 2020 16:06:03 +0000 (UTC)
Received: from localhost ([::1]:60228 helo=lists1p.gnu.org)
	by lists.gnu.org with esmtp (Exim 4.90_1)
	(envelope-from <emacs-orgmode-bounces+larch=yhetil.org@gnu.org>)
	id 1jkV8z-0006ph-RK
	for larch@yhetil.org; Sun, 14 Jun 2020 12:06:01 -0400
Received: from eggs.gnu.org ([2001:470:142:3::10]:32946)
 by lists.gnu.org with esmtps (TLS1.2:ECDHE_RSA_AES_256_GCM_SHA384:256)
 (Exim 4.90_1) (envelope-from <r.d.t.prater@gmail.com>)
 id 1jkV8b-0006pY-NC
 for emacs-orgmode@gnu.org; Sun, 14 Jun 2020 12:05:37 -0400
Received: from mail-qt1-x832.google.com ([2607:f8b0:4864:20::832]:45949)
 by eggs.gnu.org with esmtps (TLS1.3:ECDHE_RSA_AES_128_GCM_SHA256:128)
 (Exim 4.90_1) (envelope-from <r.d.t.prater@gmail.com>)
 id 1jkV8Z-0002DU-RQ
 for emacs-orgmode@gnu.org; Sun, 14 Jun 2020 12:05:37 -0400
Received: by mail-qt1-x832.google.com with SMTP id y1so10768651qtv.12
 for <emacs-orgmode@gnu.org>; Sun, 14 Jun 2020 09:05:30 -0700 (PDT)
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=gmail.com; s=20161025;
 h=mime-version:subject:from:in-reply-to:date:cc
 :content-transfer-encoding:message-id:references:to;
 bh=MhooByTQUQxdR8wRVH371n36A9+SR2BWwuRQWedGLVM=;
 b=Sv/knyDTtL2IkRVxqf8fqv6+RPeblgBVlH0aU0E1rzBad6DJzd+Vob8QuH/5+/VMfQ
 qil5XynhTlmZeVJzZEzeHGPFKyoO1z8Y2g7veL1iKl9hKVW4ydyu+QFdt6NmwqP+XXy7
 YwOcUnHPXiEmv2JJO6oyr/4KIewd+vNlsvoOqSDe44eJVgneZR4nrjLaCrcT+sgRc/o0
 Z1ldbzv8ibCAXXoUhyHl+6wYiTgtQj5MGA3vnPuKzVi9gRcnJwvRJxP01OZBdPMkWO4i
 wDbL2TzXqVFk8LSGFybf37zAz3++ecSaEq3rvHjdMjLIhQDUJKgNTtiOS9BHar9kO2Ha
 Hpcw==
X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed;
 d=1e100.net; s=20161025;
 h=x-gm-message-state:mime-version:subject:from:in-reply-to:date:cc
 :content-transfer-encoding:message-id:references:to;
 bh=MhooByTQUQxdR8wRVH371n36A9+SR2BWwuRQWedGLVM=;
 b=dlv/RBekVtLBUGDbBVQ9vbzRozEcPUGkrvPIFxbVVyM3a4dnEvHQ4QKUo/Dd10bayv
 np5d1EX3ZJX/acoWfptRH+Zt0C8079CI4EwvDHA+0P9UVvsAx0/S0cIauRvV8TrQkolN
 RQWIRSIY6ezK15UrB7SCUvINQz9pvA8x/xY6BmVFwczcyPzJWIY7Uir2cobgR82aPuq9
 GlCskUGg10tPEeNscTn8rPb+v5AwpAWgHQgIbHFCoP5TBuUbO7s5CShwzaUoLIti5Vlr
 JfUScXEj5aGYUelsz5hxcaaWB2exWbGMdvaZAL0g1IuFGbuYp+Glzjt05dcof3iiXvbZ
 0Ipw==
X-Gm-Message-State: AOAM533SX7bkauNVYuRUcBR5n60nPmpLyoPiZOOH6gonStCVniwRK1xe
 l5sKRC5p8q6wRlSZs9g1McA=
X-Google-Smtp-Source: ABdhPJynoa+Z2sfeLv8K+jL6Ju2pbuxXl1ByNy5ktGmWz/E4SUejOHMEr4jcGPxIiO0iopK0ShSTqg==
X-Received: by 2002:ac8:7413:: with SMTP id p19mr12125258qtq.387.1592150729577; 
 Sun, 14 Jun 2020 09:05:29 -0700 (PDT)
Received: from [192.168.1.8] (024-197-047-106.biz.spectrum.com.
 [24.197.47.106])
 by smtp.gmail.com with ESMTPSA id d14sm9487605qtr.17.2020.06.14.09.05.28
 (version=TLS1_2 cipher=ECDHE-ECDSA-AES128-GCM-SHA256 bits=128/128);
 Sun, 14 Jun 2020 09:05:29 -0700 (PDT)
Content-Type: text/plain;
	charset=utf-8
Mime-Version: 1.0 (Mac OS X Mail 13.4 \(3608.80.23.2.2\))
Subject: Re: Get Grades Done: the joys of Org's simple power
From: Devin Prater <r.d.t.prater@gmail.com>
In-Reply-To: <871rmic94x.fsf@aquinas>
Date: Sun, 14 Jun 2020 11:05:24 -0500
Content-Transfer-Encoding: quoted-printable
Message-Id: <CE273E08-2EEC-4D75-963B-3E0B295AC5EB@gmail.com>
References: <7F2E7FFF-5676-4A11-8E8E-021FC59C01CB@gmail.com>
 <20200611032239.GN23478@volibear>
 <CA+pajWK8WNEV28+5PmXDRQ5njT_DRJbUYjAi-BA9LvnS9ZDfqg@mail.gmail.com>
 <CAKO4ir-msj=fq6hsWfGYGvaV8upjgT96VYXezjc77M5YgvK8aQ@mail.gmail.com>
 <50B6904D-1D1E-43E2-AF09-F1BD49010469@gmail.com>
 <CAKO4ir_7aECVbV2MWoExQ1c7wp1JzVg0c8N14J4=1_5XeC0NQg@mail.gmail.com>
 <AF0632B2-9681-49AD-90C1-0A5BEE3C0089@gmail.com> <871rmic94x.fsf@aquinas>
To: Richard Lawrence <wyley.r@gmail.com>
X-Mailer: Apple Mail (2.3608.80.23.2.2)
Received-SPF: pass client-ip=2607:f8b0:4864:20::832;
 envelope-from=r.d.t.prater@gmail.com; helo=mail-qt1-x832.google.com
X-detected-operating-system: by eggs.gnu.org: No matching host in p0f cache.
 That's all we know.
X-Spam_score_int: -20
X-Spam_score: -2.1
X-Spam_bar: --
X-Spam_report: (-2.1 / 5.0 requ) BAYES_00=-1.9, DKIM_SIGNED=0.1,
 DKIM_VALID=-0.1, DKIM_VALID_AU=-0.1, DKIM_VALID_EF=-0.1, FREEMAIL_FROM=0.001,
 RCVD_IN_DNSWL_NONE=-0.0001, SPF_HELO_NONE=0.001,
 SPF_PASS=-0.001 autolearn=_AUTOLEARN
X-Spam_action: no action
X-BeenThere: emacs-orgmode@gnu.org
X-Mailman-Version: 2.1.23
Precedence: list
List-Id: "General discussions about Org-mode." <emacs-orgmode.gnu.org>
List-Unsubscribe: <https://lists.gnu.org/mailman/options/emacs-orgmode>,
 <mailto:emacs-orgmode-request@gnu.org?subject=unsubscribe>
List-Archive: <https://lists.gnu.org/archive/html/emacs-orgmode>
List-Post: <mailto:emacs-orgmode@gnu.org>
List-Help: <mailto:emacs-orgmode-request@gnu.org?subject=help>
List-Subscribe: <https://lists.gnu.org/mailman/listinfo/emacs-orgmode>,
 <mailto:emacs-orgmode-request@gnu.org?subject=subscribe>
Cc: Phil Regier <phil.regier@gmail.com>, emacs-orgmode <emacs-orgmode@gnu.org>
Errors-To: emacs-orgmode-bounces+larch=yhetil.org@gnu.org
Sender: "Emacs-orgmode" <emacs-orgmode-bounces+larch=yhetil.org@gnu.org>
X-Scanner: scn0
Authentication-Results: aspmx1.migadu.com;
	dkim=pass header.d=gmail.com header.s=20161025 header.b=Sv/knyDT;
	dmarc=pass (policy=none) header.from=gmail.com;
	spf=pass (aspmx1.migadu.com: domain of emacs-orgmode-bounces@gnu.org designates 209.51.188.17 as permitted sender) smtp.mailfrom=emacs-orgmode-bounces@gnu.org
X-Spam-Score: -1.21
X-TUID: oUw64OPa2LMh

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

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

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

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

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

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

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

     code.replaceWith(checkbox);
 }

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

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

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

 const orgSections =3D 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. [ ]=20
2. [ ]=20
3. [ ]=20
4. [ ]=20
5. [ ]=20
6. [ ]=20
7. [ ]=20
8. [ ]=20
9. [ ]=20
10. [ ]=20

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

> On Jun 14, 2020, at 4:02 AM, Richard Lawrence <wyley.r@gmail.com> =
wrote:
>=20
> Hi Devin and all,
>=20
> Devin Prater <r.d.t.prater@gmail.com> writes:
>=20
>> 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.
>=20
> 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.
>=20
> I haven't tested it extensively, and the code can surely be improved,
> but it works for the cases I could think to test.
>=20
> #+begin_export html
> <script type=3D"text/javascript">
>  function updateCookiesIn(div) {
>      const headline =3D div.querySelector("h1, h2, h3, h4, h5, h6");
>      if (!headline) return;
>      const cookies =3D Array.from(headline.querySelectorAll("code"))
>            .filter(c =3D> c.innerText.startsWith("[") && =
c.innerText.endsWith("]"));
>      const fracCookies =3D cookies.filter(c =3D> =
c.innerText.includes("/"));
>      const pctCookies =3D cookies.filter(c =3D> =
c.innerText.includes("%"));
>=20
>      // The ugly query strings here restrict the selection to =
checkboxes at *this* level of the hierarchy
>      const allTasks =3D div.querySelectorAll(`#${div.id} > div > ul =
input[type=3Dcheckbox], #${div.id} > div > ol input[type=3Dcheckbox]`);
>      const completedTasks =3D div.querySelectorAll(`#${div.id} > div > =
ul input[type=3Dcheckbox]:checked, #${div.id} > div > ol =
input[type=3Dcheckbox]:checked`);
>=20
>      const newFrac =3D =
`[${completedTasks.length}/${allTasks.length}]`;
>      const newPctText =3D allTasks.length
>            ? (100 * completedTasks.length / =
allTasks.length).toFixed(0)
>            : "100"; // Org shows 100% for a cookie when there are no =
checkboxes=20
>      const newPct =3D `[${newPctText}%]`;
>=20
>      fracCookies.forEach(c =3D> c.innerText =3D newFrac);
>      pctCookies.forEach(c =3D> c.innerText =3D newPct);
>  }
>=20
>  function replaceWithCheckbox(code) {
>      const isChecked =3D code.innerText.includes("X");
>=20
>      const checkbox =3D document.createElement("input");
>      checkbox.setAttribute("type", "checkbox");
>      if (isChecked) checkbox.setAttribute("checked", "checked");
>      checkbox.onclick =3D function (e) {
>          const container =3D findContainingSection(e.target);
>          if (!container) return;
>          updateCookiesIn(container);
>      };
>=20
>      code.replaceWith(checkbox);
>  }
>=20
>  function findContainingSection(el) {
>      if (!el.parentElement) return null;
>=20
>      const parent =3D el.parentElement;
>      const classes =3D Array.from(parent.classList);
>      if (classes.some(cl =3D> cl.startsWith("outline") && =
!cl.startsWith("outline-text"))) {
>          return parent;
>      } else {
>          return findContainingSection(parent);
>      }
>  }
>=20
>  const orgCheckboxes =3D document.querySelectorAll(".off > code, .on > =
code");
>  orgCheckboxes.forEach(replaceWithCheckbox);
>=20
>  const orgSections =3D 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
>=20
> Hope that helps!
>=20
> --=20
> Best,
> Richard