Format, Copy, and Paste from a Webpage in the Console

Every year I use Codepen + Google sheets to create an Oscar Pool leaderboard for my friends. I sit alone on my couch and live update the spreadsheet with the winner as they walk up to the stage to accept their award and I check the leaderboard to see how much I'm kicking butt. None of my friends do this, but they humor me and fill out the Google form every year. That damn form... keep reading.

I also share the code with the WORLD (five strangers on the internet) to fork for their own use.

This year, instead of tweaking the format of the leaderboard, I decided to work on automating creating the form. It is always the most time consuming piece of the puzzle and the part that the WORLD (five strangers on the internet) is really waiting for me to do.

Full disclosure: I was hoping for an open source / free way to do this, but I ended up paying $6 for a Google extension because I messed up the first time I tried to import questions and exceeded my limit. I give you some tips for getting it right the first time in this article and saving $6.

My Journey to Automation

Creating an Object for the Form Questions and Answers

I usually use console.log to troubleshoot issues in my code, but I rarely use the console in the browser to run code. Last week at work, I realized I could help a coworker compile a list from our internal system by grabbing items from a webpage based on the class and creating an object that stripped out the html and left the titles.

var pages = document.getElementsByClassName('jstree-anchor');
var titles = [];
for(var i = 0; i < pages.length; i++){
    titles.push(pages[i].innerHTML.replace(/\n|<.*?>/g,'').trim());
}
console.log(titles);

Every year, I go to the official nominee list and manually copy and paste each category and each nominee in each category from the webpage to the form and... it's not great.

So, looking at the structure of the page on Oscars.org, I realized that I could create a clean list as an array of categories and nominees by iterating through the classes in the html.

I reveled in this being incredibly easy to do... Ok, so this took me a little bit of time to format because regex isn't my thing. But it should've been easy.

var categories = document.getElementById('quicktabs-tabpage-honorees-0').getElementsByClassName('view-grouping');

var questions = [];

for(var i = 0; i < categories.length; i++){
    var question = [];
    var title = categories[i].getElementsByClassName('view-grouping-header')[0].innerHTML.replace(/\n|<.*?>/g,'').trim();
    question.push(title);
    var group = categories[i].getElementsByClassName('views-row');
    var values = [].map.call(group, function (el) {
       return el.innerHTML.replace('</h4>',' - ').replace(/\n|<.*?>/g,'').replace(/\s+/g, ' ').trim();
    });
    question.push(values);

    questions.push(question);
}

console.log(questions);

I pasted that code in the console, hit return, and bingo. Between return and the actual "bingo!!! IT WORKED!!!," there was much trial and error.

I could have iterated through the different classes for categories and nominees and grabbed the inner text, but I opted to grab each category and its nominees as one blob of html and strip out the markup and spaces.

So, when I ran the above code in the console, this:

<div class="view-grouping-content">  <h3>Nominees</h3>
  <div class="views-row views-row-1 views-row-odd views-row-first">

  <div class="views-field views-field-field-actor-name">        <h4 class="field-content">Javier Bardem</h4>  </div>  
  <div class="views-field views-field-title">        <span class="field-content">Being the Ricardos
</span>  </div>  
  <div class="views-field views-field-edit-node">        <span class="field-content"></span>  </div>  </div>
  <div class="views-row views-row-2 views-row-even">

  <div class="views-field views-field-field-actor-name">        <h4 class="field-content">Benedict Cumberbatch</h4>  </div>  
  <div class="views-field views-field-title">        <span class="field-content">The Power of the Dog
</span>  </div>  
  <div class="views-field views-field-edit-node">        <span class="field-content"></span>  </div>  </div>
  <div class="views-row views-row-3 views-row-odd">

  <div class="views-field views-field-field-actor-name">        <h4 class="field-content">Andrew Garfield</h4>  </div>  
  <div class="views-field views-field-title">        <span class="field-content">tick, tick...BOOM!
</span>  </div>  
  <div class="views-field views-field-edit-node">        <span class="field-content"></span>  </div>  </div>
  <div class="views-row views-row-4 views-row-even">

  <div class="views-field views-field-field-actor-name">        <h4 class="field-content">Will Smith</h4>  </div>  
  <div class="views-field views-field-title">        <span class="field-content">King Richard
</span>  </div>  
  <div class="views-field views-field-edit-node">        <span class="field-content"></span>  </div>  </div>
  <div class="views-row views-row-5 views-row-odd views-row-last">

  <div class="views-field views-field-field-actor-name">        <h4 class="field-content">Denzel Washington</h4>  </div>  
  <div class="views-field views-field-title">        <span class="field-content">The Tragedy of Macbeth
</span>  </div>  
  <div class="views-field views-field-edit-node">        <span class="field-content"></span>  </div>  </div>
</div>

Became this:

[
    "Actor in a Leading Role",
    [
        "Javier Bardem - Being the Ricardos",
        "Benedict Cumberbatch - The Power of the Dog",
        "Andrew Garfield - tick, tick...BOOM!",
        "Will Smith - King Richard",
        "Denzel Washington - The Tragedy of Macbeth"
    ]
]

Creating a Google Form from a CSV

I copied the json object that was output in the console and converted it to a .csv file.

Next, I imported the csv into a Google Sheet. And then things got rocky.

There are plenty of free extensions that you can install that claim to convert a sheet to a form. They don't work. If you find one, please let me know.

I caved and installed (and paid for) the FormBuilder extension. It seems free until you try to import over 50 questions then it hits you with the "you've exceeded your 50 imports." I would not have hit the limit if I did it right the first time (follow tips below and maybe you won't mess up like me).

It was pretty easy to use, so I won't go through it step by step. The only tricky things were:

1. I needed to choose "range" instead of "full" or all of the cells with content were not getting picked up.
2. Set up a column with the TYPE. If you want the builder to pick from a range of responses, the type needs to be set to something like MULTIPLE CHOICE, DROP DOWN, CHECKBOX etc. Check your spelling!!! "MULTUPLE" is not "MULTIPLE" no matter how much I wanted it to be.

The Fruits of My Labor

2024 form: THE 2024 OSCAR POOL FORM

2023 form: THE 2023 OSCAR POOL FORM
2023 leaderboard (same as last year): fork and use the 2022 code

And the moment you've all been waiting for.... THE 2022 OSCAR POOL FORM IS AVAILABLE FOR DUPLICATING!!! All of the instructions for forking the leaderboard and connecting your form results are available on my old Codepen blog post. You don't need to do any of the above in order to fork and use the 2022 code. I just wanted everyone in the WORLD (all five of you) to know what I've done to make this easier for you to generate on your own should I get hit by a bus next year. If I get hit by a bus and The Academy redesigns its website, you're sh*t out of luck. If you want to drop me a few bucks to help pay off my huge $6 debt, feel free.

For everyone else in the WORLD (the one or two of you who stumble upon this based on the subject line), I hope this helps make your life easier. Life is hard.

So, this shortcut cost me my entire Saturday night, but I was having so much fun I forgot to eat dinner. I'm going to go do that now.

Bon appétit (to me).