Is there a way to load the FCC test suite window expanded by default? Or to change the styling of the toggle?

#1

Hello,
Do you know of a way to load the FCC test suite window expanded by default? Like so:

image

I am putting together my portfolio, but the green hamburger icon doesn’t always fit in with my various project layouts. In order to make things clear for the audience (future employers fingers crossed) I want things to look intentional, so that it is clear that this is a test suite and not some sloppily placed navigation menu.

An alternative idea I had was to differentiate the toggle better by restyling it, maybe make it something similar to the github corners. But I don’t know how I can manipulate the toggle, since it’s in a shadow root (which I haven’t work with yet, but I found out the purpose is to prevent outside manipulation).

image

Thank you for your thoughts.

1 Like
#2

If you look at the example projects they all have a bit of JavaScript code which sets the test script to the correct test. If you get the names of the projects you can use localStorage.removeItem to clear the fCC_${projectName}_hide key.

Add a script to the page with the below code, here it is for the tribute-page

// Set the test to use, uncomment the correct project as needed
const projectName = 'tribute-page';
// const projectName = 'portfolio';
// const projectName = 'survey-form';
// const projectName = 'product-landing-page';
// const projectName = 'technical-docs-page';

localStorage.removeItem(`fCC_${projectName}_hide`);

If you need the names for the rest of the projects you can check out the example projects or look in localStorage. Every time you select a test from the dropdown it will add a key project_selector with the project name as the value.

1 Like
#3

+1 on the idea and the corner icon design. I would suggest just forking the test suite itself, hacking on that, and submitting a PR. I don’t recall offhand where the repo for the test suite is, but I’m sure if you asked on #contributors you’d get an answer.

While you’re at it though, I’d suggest moving the test suite to the bottom left corner of the page. The upper-left will overlap a lot of navbar branding/home buttons, and the upper right, well, github seems to have staked its claim there.

1 Like
#4

@lasjorg @chuckadams thank you for your answers!

#5

@michaelsndr Here is the repo.

1 Like
#6

@michaelsndr For your portfolio, I would not even add the test suite. There is no requirement to put the test suite into the projects outside of the projects you create for Free Code Camp. I personally would use different pages to submit to FCC for the projects just to get the certification and then polish up ant project you plan to use on your portfolio without using the test suite at all.

If you still want to use the same projects for both, then you could add something like the following to an external js file. Basically, you would add the querystring ?fcc=true to the url you submit for your project to Free Code Camp and not use the querystring for your actual portfolio. This would make it so the test suite only shows on the project you submit to Free Code Camp.

const loadScript = (source, beforeEl, async = true, defer = true) => {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script');
    const prior = beforeEl || document.getElementsByTagName('script')[0];

    script.async = async;
    script.defer = defer;

    function onloadHander(_, isAbort) {
      if (isAbort || !script.readyState || /loaded|complete/.test(script.readyState)) {
        script.onload = null;
        script.onreadystatechange = null;
        script = undefined;

        if (isAbort) {
          reject();
        } else {
          resolve();
        }
      }
    }

    script.onload = onloadHander;
    script.onreadystatechange = onloadHander;

    script.src = source;
    prior.parentNode.insertBefore(script, prior);
  });
}

(() => {
  const query = window.location.search.substring(1);
  const vars = query.split("&");
  for (let param of vars) {
    const [varName, val] = param.split("=");
    if (varName == 'fcc' && val === 'true') {
      const scriptUrl = 'https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js';
      loadScript(scriptUrl).catch(() => {
        console.log('failed to load test script');
      });
    }
  }
})();
1 Like
#7

I think I will go for that option. Thank you!

“Truth is ever to be found in simplicity, and not in the multiplicity and confusion of things.” Isaac Newton

#8