.devcontainer/devcontainer.json

@@ -3,7 +3,6 @@
   "build": {
       "dockerfile": "Dockerfile"
   },
-  "updateContentCommand": "sbt fastOptJS fullOptJS",
   "postCreateCommand": "nohup http-server -p 8080 &",
   "extensions": [
       "scalameta.metals",

.gitignore

@@ -15,3 +15,5 @@ project/metals.sbt
 .bloop/
 
 *.out
+
+.DS_Store

build.sbt

@@ -7,14 +7,10 @@ scalaVersion := "3.1.0"
 // Don't automatically call main
 scalaJSUseMainModuleInitializer := false
 
-resolvers += "jitpack" at "https://jitpack.io"
-
-updateOptions := updateOptions.value.withLatestSnapshots(false)
+//updateOptions := updateOptions.value.withLatestSnapshots(false)
 
 libraryDependencies ++= Seq(
-//  "org.scala-js" %%% "scalajs-dom" % "1.1.0",
-  "com.github.wbillingsley.veautiful" %%% "veautiful" % "v0.3-SNAPSHOT",
-  "com.github.wbillingsley.veautiful" %%% "doctacular" % "v0.3-SNAPSHOT",
+  "com.wbillingsley" %%% "doctacular" % "0.3-M3",
 )
 
 

index.html

@@ -6,7 +6,8 @@
 
     <link rel="icon" type="image/png" href="images/snoboticon.png" />
 
-    <link href="https://fonts.googleapis.com/css?family=Fira+Mono|Fira+Sans|Michroma" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Tangerine:wght@400;700&family=WindSong:wght@400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

project/build.properties

-sbt.version = 1.6.2
\ No newline at end of file
+sbt.version = 1.8.0
\ No newline at end of file

src/main/scala/acssite/Common.scala

@@ -5,7 +5,7 @@
 
 package acssite
 
-import com.wbillingsley.veautiful.html.{<, DElement, Markup, VHtmlNode, ^}
+import com.wbillingsley.veautiful.html.{<, DElement, Markup, DHtmlContent, ^}
 import com.wbillingsley.veautiful.templates.{DeckBuilder, VSlides}
 
 import scala.collection.mutable
@@ -18,7 +18,7 @@ object Common {
 
   given markdownGenerator:Markup = new Markup({ (s:String) => js.Dynamic.global.marked.parse(s).asInstanceOf[String] })
 
-  def markdown(s:String):VHtmlNode = markdownGenerator.Fixed(s)
+  def markdown(s:String) = markdownGenerator.Fixed(s)
 
 
   /** Circuits Up! Logo */
@@ -26,7 +26,7 @@ object Common {
     <.span()
   }
 
-  def downloadFromGitHub(project:String, user:String="UNEcosc250"):VHtmlNode = {
+  def downloadFromGitHub(project:String, user:String="UNEcosc250"):DHtmlContent = {
     <.a(
       ^.cls := "btn btn-secondary",
       ^.href := s"https://github.com/$user/$project/archive/master.zip",

src/main/scala/acssite/Site.scala

@@ -27,7 +27,8 @@ object ITICSESite {
     site.toc = site.Toc(
       "Home" -> site.HomeRoute,
       "Presentations" -> site.Toc(
-        "Aug 2022" -> site.addDeck("aug2022", planning.aug2022deck)
+//        "Aug 2022" -> site.addDeck("aug2022", planning.aug2022deck),
+        "ASCILITE 2022" -> site.addDeck("ascilite2022", planning.ascilite2022deck),
       ),
 
 

src/main/scala/acssite/Styles.scala

@@ -30,6 +30,7 @@ object Styles {
 
   def installStyles():Unit = {
     VSlides.defaultTheme.addRules(Map(
+      " strong" -> "color: purple;",
       "" -> "position: relative; top: 0px;"
     ))
 

src/main/scala/acssite/Template.scala

 package acssite
 
-import com.wbillingsley.veautiful.html.{<, VHtmlNode, ^}
+import com.wbillingsley.veautiful.html.{<, DHtmlContent, ^}
 import com.wbillingsley.veautiful.templates.DeckBuilder
 
 /**
@@ -35,7 +35,7 @@ extension (db:DeckBuilder) {
   }
 
   /** A title slide for the front of the deck */
-  def titleSlide(title:String, subtitle:String, authorCard:VHtmlNode, logos:VHtmlNode):DeckBuilder = {
+  def titleSlide(title:String, subtitle:String, authorCard:DHtmlContent, logos:DHtmlContent):DeckBuilder = {
     db.veautifulSlide(
       <.div(
         <.h1(^.attr("style") := "margin-bottom: 0; font-size: 60px", title),
@@ -63,7 +63,7 @@ extension (db:DeckBuilder) {
 
 
 
-def bootStrapMediaBox(imageUrl:String, content:VHtmlNode) = {
+def bootStrapMediaBox(imageUrl:String, content:DHtmlContent) = {
   <.div(^.cls := "media",
     <.img(^.src := imageUrl, ^.cls := "mr-3", ^.attr("style") := "height: 150px"),
     <.div(^.cls := "media-body", ^.attr("style") := "text-align: left;", content)

src/main/scala/courses/CBoKGrid.scala

@@ -39,7 +39,7 @@ val rotatedHeader = Styling(
     |    transform: rotate(-60deg);
     |    display: inline-block;
     |    transform-origin: left;
-    |    width: 30px;
+    |    width: 1.8em;
     |    bottom: 0;
     |""".stripMargin
 ).register()

src/main/scala/courses/HPlanPrereqWidget.scala

@@ -2,6 +2,7 @@ package courses
 
 import com.wbillingsley.veautiful.Unique
 import com.wbillingsley.veautiful.html.{<, DElement, SVG, Styling, VHtmlComponent, ^, EventMethods}
+import com.wbillingsley.veautiful.svg.DSvgContent
 import org.scalajs.dom
 
 
@@ -14,7 +15,7 @@ case class HPlanChooser(course:Course) extends VHtmlComponent {
       <("select")(
         ^.on("change") ==> { (evt) =>
           selected = evt.inputValue
-          rerender(),
+          rerender()
         },
         ^.attr("name") := "Plan",
         for 
@@ -72,14 +73,14 @@ case class HPlanPrereqWidget(course:Course, plan:Plan) extends VHtmlComponent {
     |width: 200px;
     |display: inline-block;
     |font-family: 'Lato', sans-serif;
-    |size: 12px;
+    |font-size: 15px;
     |fill: black;
     |text-align: center;
     |padding: 50px 5px 5px 5px;
     |""".stripMargin
   ).modifiedBy(
       " .code" -> "font-size: 11px;",
-      " .name" -> "",
+      " .name" -> "font-size: 20px;",
       " .component" -> "position: absolute; top: 0; font-style: italic; font-size: 12px; color: orange;",
       " .tag" -> "margin: 2px; padding: 2px 5px 2px 5px; background-color: #add; font-size: 12px;",
       " .tag.Capstone" -> "background: #dad",
@@ -88,7 +89,7 @@ case class HPlanPrereqWidget(course:Course, plan:Plan) extends VHtmlComponent {
 
   val sectionStyle = Styling(
     """font-family: 'Lato', sans-serif;
-      |size: 12px;
+      |font-size: 12px;
       |fill: black;
       |dominant-baseline: middle;
       |""".stripMargin
@@ -105,7 +106,7 @@ case class HPlanPrereqWidget(course:Course, plan:Plan) extends VHtmlComponent {
 
   val orStyle = Styling(
     """font-family: 'Lato', sans-serif;
-      |size: 12px;
+      |font-size: 15px;
       |fill: rgb(240, 240, 245);
       |stroke: rgb(200, 200, 200);
       |dominant-baseline: hanging;
@@ -189,7 +190,7 @@ case class HPlanPrereqWidget(course:Course, plan:Plan) extends VHtmlComponent {
   def columnTransform(i:Int, gutter:Boolean = false):String = s"translate(${columnX(i, gutter)}, 0)"
 
 
-  def svg(el:PrereqElement):(Int, <.SingleChild[dom.svg.G]) = el match {
+  def svg(el:PrereqElement):(Int, DSvgContent) = el match {
     // A single unit is 
     case s:String =>
       1 -> singleUnitBox(s)

src/main/scala/courses/PlanPrereqWidget.scala

 package courses
 
 import com.wbillingsley.veautiful.Unique
-import com.wbillingsley.veautiful.html.{<, DElement, SVG, Styling, VHtmlComponent, ^}
+import com.wbillingsley.veautiful.html.{<, DElement, SVG, Styling, ^}
+import com.wbillingsley.veautiful.svg.{DSvgContent, DSvgComponent}
 import org.scalajs.dom
 
 /**
  * Lays out the structure of a course vertically, so that groups of subjects can be seen
  * more easily
  */
-case class PlanPrereqWidget(plan:Plan) extends VHtmlComponent {
+case class PlanPrereqWidget(plan:Plan) extends DSvgComponent {
 
   import acssite.given
 
@@ -110,7 +111,7 @@ case class PlanPrereqWidget(plan:Plan) extends VHtmlComponent {
     }
 
 
-  def svg(offset:Int, el:PrereqElement):(Int, <.SingleChild[dom.svg.G]) = el match {
+  def svg(offset:Int, el:PrereqElement):(Int, DSvgContent) = el match {
     case s:String =>
       1 -> singleUnitBox(offset, s)
       /*SVG.g(
@@ -141,7 +142,7 @@ case class PlanPrereqWidget(plan:Plan) extends VHtmlComponent {
   }
 
   val planStrings = flatStrings(plan)
-  println(planStrings)
+//  println(planStrings)
 
   def prereqLines(plan: Plan, active:Option[String]) =
     def arrow(startRow:Int, endRow:Int, number:Int) =

src/main/scala/planning/ascilite2022deck.scala

+package planning
+
+import com.wbillingsley.veautiful.html._
+import com.wbillingsley.veautiful.templates.DeckBuilder
+import org.scalajs.dom
+
+import scalajs.js
+import scala.util.Random
+import acssite.Common
+import Common.given
+
+import courses._
+
+def scrollableDiv = <.div(^.attr("style") := "height: 800px; overflow-y: scroll")
+
+extension (db:DeckBuilder) {
+  def imageSlide(caption:String, url:String) = db.veautifulSlide(
+    <.div(^.style := "height: 1080px; position: relative; top: 0; margin-left: 2%; margin-right: 2%",
+        <.div(<.img(^.src := url, ^.style := "max-height: 1080px;")),
+        <.label(caption, ^.style := "position: absolute; top: 0; left:60%; padding: 1em; font-size: 42px; color: black;")
+    )
+  )
+
+  def mistyroseImageSlide(caption:String, url:String) = db.veautifulSlide(
+    <.div(^.style := "height: 1080px; position: relative; top: 0; margin-left: 2%; margin-right: 2%",
+        <.div(<.img(^.src := url, ^.style := "max-height: 1080px;")),
+        <.label(caption, ^.style := "position: absolute; top: 0; left:60%; padding: 1em; background: mistyrose; font-size: 42px; color: black;")
+    )
+  )
+}
+
+val ascilite2022deck = DeckBuilder(1920, 1080).markdownSlide("""
+  |# Lightweight mapping of identity verification methods and secondary course aspects: "Swiss cheese" modelling.
+  |Will Billingsley  
+  |University of New England, Australia  
+  |wbilling@une.edu.au
+  |""".stripMargin).withClass("center middle")
+  .markdownSlides("""
+  |### A less formal introduction...
+  |
+  |In 2022, I needed to do our accreditation with the Australian Computer Society (ACS), right after the pandemic
+  |
+  |Like most universities, we'd lost our paper-based exams.
+  |
+  |""".stripMargin)
+  .imageSlide("Paper based exams are inconvenient and involve being watched", "images/human invigilated.jpg")
+  .imageSlide("...but somehow students feared online proctoring more", "images/online proctored.jpg")
+  .imageSlide("Although we understand how proctoring works and our exams team support it...", "images/proctor view.jpg")
+  .imageSlide("...computing academics elsewhere keep expressing skepticism", "images/cheating.jpg")
+  .veautifulSlide(div(
+    h3("UNE Assessment policy"),
+    Common.markdown(
+      """|
+         |Clauses 42 and 43: Students could opt out of proctoring by deciding not to consent to the collection of personal information. 
+         |Academics had to set "alternative assessment"
+         |
+         |In some computing units, more than half the students opted out in 2020.
+         |""".stripMargin),
+    blockquote(^.style := "opacity: 0.5; background: #eee;",
+      Common.markdown(
+        """|42. **If a student** has considered the requirements for online examinations in clause 35 and is unable to meet the systems or conditions requirements 
+           |or **does not consent to the collection of personal information, the student must apply for an alternative assessment** through the UNE website within 
+           |four (4) weeks of the commencement of the teaching period. If an examination is scheduled within the first four weeks of the teaching period, the 
+           |application must be made at least one (1) week before the examination.
+           |
+           |43. Subject to any inherent requirements and the requirements of any accrediting body, **the Unit Coordinator will provide an alternative assessment** for 
+           |completion within the relevant teaching period. As with all assessment tasks, alternative assessments must be designed in accordance with the provisions
+           |of Part A of this Policy and must enable the student to demonstrate achievement of the learning outcomes assessed through the online examination. Unless 
+           |specified by an accrediting body, **the alternative assessment is not required to be a supervised examination**.
+           |""".stripMargin
+      )
+    ),
+  ))
+  .markdownSlides("""
+  |
+  |### A knock-on effect
+  |
+  |Many computing academics didn't like dealing with the online exams process and having to set an alternative assessment.
+  |
+  |So, we had a number of subjects that dropped proctoring and just used whatever their "alternative assessment" would have been.
+  |
+  |Many of those are quite creative, but they're up to the individual academic
+  |
+  |---
+  |
+  |### Australian Computer Society accreditation
+  |
+  |> ## On-Line Education
+  |>
+  |> d. **There will be mechanisms to address identity management in a virtual environment**.
+  |
+  |So how do I defensibly express what it is?
+  |
+  |Realistically, the strategy isn't just "online proctoring" but all the techniques we use in our alternative assessments and non-exam assessments to make misconduct less likely.
+  |
+  |Let's map them across the degree
+  |
+  |---
+  |
+  |### Multi-layered techniques to deter cheating have been successful at unit level
+  |
+  |* Crime prevention case study (Baird & Clare, 2017)
+  |* "Why students choose not to cheat" (Rundle et al., 2020)
+  |
+  |I created mappings of the mechanisms of IVA used in eachsubject across each degree
+  |
+  |* Inspired by "Swiss Cheese" model of accident causation (Reason, 1990)
+  |* Shift in perspective to seeing the degree, rather than an individual subject within it, as the item being defended against cheating
+  |
+  |
+  |
+  |""".stripMargin)
+  .veautifulSlide(div(
+    scrollableDiv(^.prop("scrollTop") := "120",
+      for c <- courses.find(_.code == "BCOMP(SD)") yield idverifyPage(c)
+    )
+  ))
+  .markdownSlides("""
+  |
+  |### Mapping elements of courses is long established
+  |
+  |* Visual maps of curricula (Hausman, 1974)
+  |* Instructional alignment (Cohen, 1987)
+  |* Constructive alignment (Biggs, 1996)
+  |* Using them as ways of measuring what's important in a course (Veltri et al., 2015)
+  |* Use as a design tool and for collaboration (Uchiyama & Rudin, 2009; Weingards-de Meij & Merx, 2018)
+  |* Using course maps to visualise learning outcome progress back to students (Kay et al., 2022)
+  |
+  |
+  |""".stripMargin)
+  .mistyroseImageSlide("Constructive alignment and mapping of course elements is well established in Australia", "images/courseloop_mapping.png")
+  .mistyroseImageSlide("But course maps have moved into the governance process. (Slow, not a design tool.)", "images/courseloop_proposals.png")
+  .markdownSlides("""
+  |### Lightweight mapping
+  |
+  |The identity verification maps are not ones we would wish to put into governance 
+  |
+  |- it'd require several committees (and months) to add or remove a video task
+  |
+  |But there are a lot of other mappings we need that are a snapshot in time too. 
+  |
+  |""".stripMargin)
+  .veautifulSlide(div(
+    scrollableDiv(
+      for c <- courses.find(_.code == "BCOMP(SD)") yield planPage(c)
+    )
+  ))
+  .veautifulSlide(div(
+    scrollableDiv(
+      for c <- courses.find(_.code == "BCOMP(SD)") yield cbokPage(c)
+    )
+  ))
+  .veautifulSlide(div(
+    scrollableDiv(
+      for c <- courses.find(_.code == "BCOMP(SD)") yield swebokPage(c)
+    )
+  ))
+  .veautifulSlide(div(
+    scrollableDiv(
+      for c <- courses.find(_.code == "MDSC") yield dsbokPage(c)
+    )
+  ))
+  .markdownSlides("""
+  |
+  |### Maps bring the burden of creation
+  |
+  |Across several degrees, I had to do a lot of maps. This is only feasible if there's an easy way to do it.
+  |
+  | - We're the computer science discipline; so I built one.
+  | - Maps are a visualisation, so I built it using the same kit I used to write this deck.
+  |
+  |Very fast edit cycle
+  | - tweak the course/unit data and hit reload.
+  | - this has let us use this as a **design tool** and embed it into course presentations (and this talk!)
+  |
+  |---
+  |
+  |### Conclusion
+  |
+  |* Swiss Cheese modelling - modelling the identity verification mechanisms across a degree
+  |
+  |* Keeping lightweight maps that are not in the governance process, but snapshots in time
+  |
+  |(and maps are visualisations so don't draw them; generate them.)
+  |
+  |""".stripMargin)
+  .markdownSlide(Common.willCcBy).withClass("bottom")
+  .renderSlides
\ No newline at end of file