Making a DuckDuckHack Instant Answer work on own site

Question

I'm trying to see whether it's possible to use the code from DuckDuckHack Instant Answers outside of the context of the main DuckDuckGo website. After all, an Instant Answer is mostly a standalone component that consists of some HTML, CSS and Javascript and should be relatively self-contained and reusable.

Since the DuckDuckHack project is in maintenance mode, it seems to be a bit difficult to obtain information: the Slack and Forum mentioned on the Developer Guide have been disabled. I tried to find out whether other people tried to make Instant Answers work in other contexts, but I couldn't find anything. There are tutorials on writing Instant Answers, such as this using Perl and the DuckPAN tools. I tried to get an existing Instant Answer to work using those tools but I failed to get it to work properly (not sure whether they are still maintained).

Since those tools seem to be a bit heavyweight, I thought it could be possible to bypass them completely and try to just use the HTML, CSS and JS from the Instant Answer directly.

I've given the Calculator a first shot. I identified the relevant source code in the duckduckgo/zeroclickinfo-goodies repository's directory share/goodie/calculator . The HTML seems to be in the content.handlebars , and then there's calculator.css and calculator.js . I created a plain HTML file , put the HTML from content.handlebars in there and included references to the CSS file and the JS file. At first, the CSS wouldn't work because the CSS rules don't apply without adding some more wrapper divs that can be easily found when inspecting the DuckDuckGo site with the calculator Instant Answer visible. After adding those wrapper divs, the calculator UI appears more or less intact . However the buttons of the UI do not work at all yet.

Looking at the Javascript console I get this error:

Uncaught ReferenceError: DDH is not defined
    at calculator.js:1

Apparently an object DDH is required by calculator.js , however I have no idea what that object should be and how I could create it.

Does anybody know how this DDH variable gets usually initialized or more generally how to make this work? Any reference to projects reusing the code from DuckDuckHack for their own sites would also be highly appreciated.

Answer 1

I think the details of how the DDH object is put together might not be exposed through the open-source portion of DDG.

I've also made some attempts to repurpose some of the built-in DDG IA functionality (eg get programmatic access to the many, useful instant answers unavailable through their API ).

In the process, I cloned the goodie repo and poked around. The pattern seems to be that for most goodies the payload to be displayed is DDH.<goodie>.content . In my local copy of the goodie repo:

$ grep -rE 'DDH' ./lib/

./lib/DDG/Goodie/Conversions.pm:                    content => 'DDH.conversions.content'
./lib/DDG/Goodie/Conversions.pm:                content => 'DDH.conversions.content'
./lib/DDG/Goodie/Game2048.pm:                content => 'DDH.game2048.content'
./lib/DDG/Goodie/PublicDNS.pm:                list_content => 'DDH.public_dns.content',
./lib/DDG/Goodie/JsBeautifier.pm:                    content => 'DDH.js_beautifier.content'
./lib/DDG/Goodie/SassToCss.pm:                    content => 'DDH.sass_to_css.content'
./lib/DDG/Goodie/Constants.pm:                title_content => 'DDH.constants.title_content'
...

On the javascript side of things, you'd find the corresponding .js files in the share/goodie directory, as you did for the calculator goodie.

The <goodie>.js files seem to introduce DDH.<goodie> namespaces (typically right at the top of the file) and define DDH.<goodie>.build functions. This procedure is referenced in the goodie-display docs (see the section titled Setting Goodie Display Options on the Front end therein).

Nowhere in the docs, though, is it documented how the content property of DDH.<goodie> is put together. I cloned the docs repo and grepped for DDH , revealing nothing to that effect.

None of the .js files in the share/goodie folder of the goodie repo , though, seem to give a clue as to how DDH.<goodie>.content is assembled either. Indeed, some of those .js files do not even contain the string content . For a listing of all share*.js files that do contain the string content , I did (in the local copy of the goodie repo):

$ find ./share -name "*.js" |xargs grep -l 'content'

./share/goodie/countdown/countdown.js
./share/goodie/text_converter/text_converter.js

The other .js files do not contain that string at all..

Edit

On the other hand though, I see you did manage to get the calculator going with some modifications to the .js file (eg by inserting that missing DDH namespace).